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:

Voici le code CSS:

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:

Code CSS:

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