Menu déroulant en CSS

Un menu déroulant est un élément d'interface qui permet d'afficher des sous-menus lorsque l'utilisateur survole un élément du menu principal. Cette technique utilise la combinaison de listes HTML et de CSS, sans nécessiter de JavaScript.

Dans cet exemple, nous allons créer un menu horizontal avec un sous-menu qui apparaît au survol.

1. Structure HTML

La structure HTML repose sur l'utilisation de listes imbriquées : une liste non ordonnée pour le menu principal, et une liste ordonnée pour le sous-menu.

html

                    
     <nav>
          <ul>
               <li><a href="#">Menu1</a></li>
               <li><a href="#">Menu1</a></li>
               <li><a href="#">Menu Déroulant</a>
                    <ol>
                         <li><a href="#">Sous-menu</a></li>
                         <li><a href="#">Sous-menu</a></li>
                         <li><a href="#">Sous-menu</a></li>
                         <li><a href="#">Sous-menu</a></li>
                    </ol>
               </li>
               <li><a href="#">Menu1</a></li>
               <li><a href="#">Menu1</a></li>
          </ul>
     </nav>
     

2. Style CSS de base

Commençons par réinitialiser les styles par défaut et définir la mise en page de base.

css

                    
     * {
          margin: 0;
          padding: 0;
     }
     html {
          background: #03161c;
     }
     body {
          background: white;
          width: 80%;
          margin: 5vh auto;
     }
     

3. Style du menu principal

Le menu principal est disposé horizontalement grâce à flexbox, avec les éléments espacés uniformément.

css

                    
     nav {
          background: red;
     }
     ul {
          background: yellow;
          display: flex;
          justify-content: space-evenly;
          list-style: none;
     }
     li {
          background: purple;
          width: 16.789%;
          text-align: center;
          line-height: 2.2em;
          position: relative;
     }
     li:hover {
          background: teal;
     }
     li a {
          text-decoration: none;
          color: white;
     }
     

4. Style du sous-menu

Le sous-menu est initialement caché et apparaît au survol de l'élément parent.

css

                    
     ol {
          list-style: none;
          position: absolute;
          display: none;
          width: 100%;
     }
     ol li {
          width: 100%;
     }
     ul li:hover ol {
          display: block;
     }
     

La propriété position: relative sur le li parent et position: absolute sur le sous-menu permet de positionner correctement le sous-menu par rapport à son parent.

5. Fonctionnement

Le menu déroulant fonctionne grâce à trois mécanismes CSS principaux :

• Le positionnement absolu du sous-menu par rapport à son parent
• L'utilisation de display: none pour cacher initialement le sous-menu
• Le sélecteur :hover qui permet d'afficher le sous-menu au survol

Cette technique présente l'avantage d'être légère (pas de JavaScript) et accessible.