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:

  1. <ul>    
  2. <li>   
  3. Comores   
  4. <ul>   
  5. <li>Ngazidja</li>   
  6. <li>Ndzuwani</li>  
  7. <li>Mwali </li>   
  8. <li>Mayotte </li>   
  9. </ul>  
  10. </li>   
  11. </ul>   

Voici le code CSS:
  1. ul  ul  {display: none;}   
  2. 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:

  1. <ul>  
  2.   <li>  
  3.     Comores  
  4.     <ul class="menu1">  
  5.       <li>  
  6.         Ngazidja  
  7.         <ul class="menu2">  
  8.           <li>Moroni</li>  
  9.           <li>Nkourani Sima</li>  
  10.         </ul>  
  11.       </li>  
  12.       <li>Ndzuwani</li>  
  13.       <li>Mwali</li>  
  14.       <li>Mayotte</li>  
  15.       
  16.     </ul>  
  17.   </li>  
  18. </ul>  

Code CSS:
  1. ul  ul  {display: none;}   
  2. i: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