Les menus déroulants

Vous avez toujours voulu savoir comment mettre des menus déroulants en html et CSS. Eh bien, le moment est venu d’apprendre à faire ce genre des menus.

Pour réaliser des menus déroulants, nous allons utiliser en html des listes à puces.

Prenons un exemple:
Voici le code html:
<ul> <li> Comores <ul> <li>Ngazidja</li> <li>Ndzuwani</li> <li>Mwali </li> <li>Mayotte </li> </ul> </li> </ul>
Voici le code CSS:
ul ul {display: none;} li:hover ul {display:block;}

ul ul {display: none;} : ce code dit que si une balise <ul> est inséré dans une autre balise <ul>, elle ne sera pas affichée. C’est pour cela d’ailleurs qu’on ne voit pas Ngazidja, Ndzuwani, Mwali et Mayotte car ces derniers se trouvent dans une balise <ul> placé à l’intérieur d’une balise <ul>.
li:hover ul {display:block;} : Ce code dit que si une balise <li> est survolé par la souris et qu’une balise <ul> se trouve à l’intérieur de la balise <li>, elle sera affichée.

Maintenant que vous avez compris, prenons un autre exemple en un élargissant un peu le code:
Code HTML:
<ul> <li> Comores <ul class="menu1"> <li> Ngazidja <ul class="menu2"> <li>Moroni</li> <li>Nkourani Sima</li> </ul> </li> <li>Ndzuwani</li> <li>Mwali</li> <li>Mayotte</li> </ul> </li> </ul>
Code CSS:
ul ul {display: none;} li:hover ul.menu1, li li:hover ul.menu2 {display:block;}

Le deuxième exemple, on n’a rien à expliquer car il y a rien de nouveau.

NB : Il faut être sure d’avoir un navigateur récent pour que cela marche.

Une question? Cliquez ici pour la poser.

Retour sur le portail du HTML/CSS