Liste déroulante HTML la sous liste fait partie du la sous liste fait
Transcription
Liste déroulante HTML la sous liste fait partie du la sous liste fait
Liste déroulante HTML <nav id="menu-haut"> <ul> </ul> </nav> <li><a href="#">Accueil</a></li> <li><a href="#">Etranger</a> <ul> <li><a href="#">Italie</a></li> <li><a href="#">Allemagne</a></li> <li><a href="#">Espagne</a></li> </ul> </li> <li><a href="#">Politique</a></li> <li><a href="#">Culture</a> <ul> <li><a href="#">Livres</a></li> <li><a href="#">Cinéma</a></li> <li><a href="#">Musique</a></li> </ul> </li> <li><a href="#">Social</a></li> la sous liste fait partie du <li> la sous liste fait partie du <li> <div class="clear"></div> Résultat CSS enlever les puces, les marges et les padding des ul ul { margin:0; padding:0; list-style: none; } CSS faire flotter les <li>, leur donner une largeur, et une marge droite pour les séparer, leur donner un arrière-plan <ul> #menu-haut ul li { float:left; width: 99px; margin-right: 1px; background: #ccc } <li> <ul> <li> </li> <li> </li> </ul> </li> </ul> CSS masquer les ul li ul #menu-haut ul li ul { display:none; } </li> <li> Liste déroulante CSS faire réapparaître la sous liste en passant le curseur sur le premier niveau de li #menu-haut ul li:hover ul { display:block; } Le ul qui était masqué réapparaît quand on passe le curseur sur le li qui le contient <ul> <li> <ul><li> <li> <li> </ul> </ul> </li> </li> </li> </li>