Skip to content

Menu déroulant avec CSS – Tutoriel

Soyez sociable ! Partagez :
  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Une question qui est mainte et mainte fois demandée sur les forums est celle de la réalisation d’un menu déroulant avec CSS.

Réaliser un menu déroulant avec CSS

Comment réaliser un menu déroulant avec CSS ?

La base !

Dans un premier temps, nous allons structurer notre menu avec un niveau d’imbrication. Je vous assure que vous n’aurez pas besoin de plus ! En effet, un menu doit être un accès RAPIDE à certaines parties de votre site, au delà de 2 niveaux d’imbrication, vos pages deviennent quasi inaccessible !

<ul class="menu">
  <li><a href="#">Lien 1</a></li>
  <li>
    <a href="#">Lien 2</a>
    <ul class="submenu">
      <li><a href="#">Lien 2-1</a></li>
      <li><a href="#">Lien 2-2</a></li>
      <li><a href="#">Lien 2-3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Lien 3</a>
    <ul class="submenu">
      <li><a href="#">Lien 3-1</a></li>
      <li><a href="#">Lien 3-2</a></li>
      <li><a href="#">Lien 3-3</a></li>
    </ul>
  </li>
</ul>

Libre à vous de respecter ou non cette architecture. Mais attention, si vous débutez, reproduisez d’abord le code avant de le personnaliser !!

Réaliser le menu déroulant avec CSS

Dans un premier temps, nous allons masquer les sous-menus :

.submenu{
  display:none;
}

Si vous testez votre code au fur et à mesure, vous devriez voir les sous-menus disparaître.

Ensuite, nous allons décrire le comportement des puces de la liste “<li>”. En quelques mots, quand une puce est survolée par la souris, on affiche le sous-menu correspondant :

.menu li:hover > .submenu {
  display:block;
}

C’est aussi simple que ça ! En testant, lorsque vous survolez un lien, sons sous-menu apparaît !

Enjoy it !

Soyez Sociable ! Partagez !
Published inTutoriel
banner