Menu déroulant vertical 100% CSS

Ci-dessous, voici le résultat final. Évidemment, il est possible de personnaliser facilement l’ensemble des couleurs et les dimensions des liens du menu.

Création de la structure HTML du menu

La première chose à faire est de construire la structure HTML du menu.

Comme vous pouvez le voir dans le code ci-dessous, la structure HTML du menu est basée sur une liste à puces <ul></ul> sur laquelle j’ai ajouté une classe class="dropdownmenu" qui me permettra de gérer sa mise en forme en CSS par la suite. Les liens de premier niveau du menu sont ensuite insérés dans des lignes <li></li> de la liste.

<ul class="dropdownmenu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
</ul>

Nous avons donc notre premier niveau pour le menu. Nous devons maintenant construire les sous-menus.

Pour chaque élément ayant un sous-menu, nous allons rajouter une « sous-liste » à puces directement dans la ligne de l’élément en question avec un lien par ligne.

<li><a href="#">Menu 2</a> 
    <ul>
        <li><a href="#">Sous-Menu 2.1</a></li>
        <li><a href="#">Sous-Menu 2.2</a></li>
        <li><a href="#">Sous-Menu 2.3</a></li>
        <li><a href="#">Sous-Menu 2.4</a></li>
    </ul>
</li>

La seule difficulté ici est de s’assurer de bien fermer les différentes balises. Pour cela, il est conseillé d’indenter correctement son code pour une meilleure visibilité.

Voici le résultat final :

<ul class="dropdownmenu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sous-Menu 2.1</a></li>
            <li><a href="#">Sous-Menu 2.2</a></li>
            <li><a href="#">Sous-Menu 2.3</a></li>
            <li><a href="#">Sous-Menu 2.4</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
</ul>

La structure HTML est terminée, nous pouvons passer à la mise en forme en CSS.

Mise en forme du menu en CSS

La première chose à faire est de définir la largeur du menu. (J’en ai profité pour ajouter une couleur de fond).

.dropdownmenu {
    background-color: #666 ;
    width: 140px; 
}

Nous allons maintenant supprimer les puces et toutes les marges pour les listes de notre menu. Cela concerne la liste principale mais également les listes utilisées pour les sous-menu.

.dropdownmenu { /* Pour le menu principal */
    list-style-type: none;
    margin: 0px;
    padding: 0px; 
} 
.dropdownmenu ul { /* Pour les sous-menus */
     list-style-type: none; 
     margin: 0px;
     padding: 0px;
}

On peut faire un peu mieux en réunissant les deux réglages de liste.

.dropdownmenu,
.dropdownmenu ul { /* Pour les sous-menus */
    list-style-type: none; 
    margin: 0px;
    padding: 0px;
}

Nous allons ensuite masquer les sous-menus pour qu’ils ne soient pas visibles par défaut.

.dropdownmenu ul {
    display: none;
}

Je vais anticiper un petit peu et ajouter la propriété position: relative; aux lignes du menu principal ce qui me permettra ensuite de positionner correctement les sous-menus en absolute.

.dropdownmenu li {
    position: relative;
}

Je vais maintenant m’occuper de la mise en forme des liens du menu.

• display: block; : Les liens sont transformés en blocs pour pouvoir les dimensionner.
• width: 120px; : On ajoute une largeur aux liens. En ajoutant les marges internes les liens feront 140px de large comme le menu.
• height: 30px; : On ajoute également une hauteur.
• line-height: 30px; : Cette propriété permet de centrer verticalement le texte du lien, la valeur doit être équivalente à la hauteur du lien.
• padding: 3px 10px; : J’ajoute quelques marges internes pour aérer tout ça.
• text-align: center; : Je termine en centrant le texte des liens.

.dropdownmenu a {
    display: block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    padding: 3px 10px;
    text-align: center;
}

Grâce au sélecteur .dropdownmenu li:hover ul, nous allons nous occuper de la mise en forme des sous-menu lorsque une ligne du menu principal est survolée.

• display: block; : Les listes correspondant aux sous-menus étaient masquées jusqu’à présent. Il faut donc les rendre visibles en les remettant en bloc.
• position: absolute; : Pour pouvoir positionner correctement les sous-menus, je les positionne en absolute. Cela fonctionnera car j’ai pensé au préalable à placer les lignes qui contiennent les sous-menus en relative.
• top: 0px; : Cette ligne est inutile ici, mais vous pouvez l’utiliser pour décaler les sous-menus.
• left: 140px; : Je positionne le menu à 140px de la gauche, ce qui correspond à la largeur du menu.
• z-index: 100; : La dernière chose à prévoir et la superposition des sous-menus. J’ajoute donc la propriété z-index pour m’assurer que les sous-menus soient bien au dessus du reste de ma page.

.dropdownmenu li:hover ul {
    display: block ;
    position: absolute;
    top: 36px; 
    left: 0px; 
    z-index: 100; 
}

Il ne reste plus qu’à personnaliser les couleurs pour le menu.

/* Gestion des couleurs */ 
.dropdownmenu li {   
    background-color: #666;  /* Couleur d'arriere-plan du menu */ 
}
.dropdownmenu li a {
    color: #ccc; /* Couleur du texte du menu */ 
} 
.dropdownmenu li:hover {
    background-color: #000; /* Couleur d'arriere-plan du menu au survol */ }
.dropdownmenu li:hover a {
    color: #fff; /* Couleur du texte du menu au survol */ 
}
.dropdownmenu ul li {
    background-color: #ccc; /* Couleur d'arriere-plan des sous-menu */
}
.dropdownmenu ul li:hover {
    background-color: #000;  /* Couleur d'arriere-plan des sous-menu au survol */ } 
.dropdownmenu ul li a {
    color: #666; /* Couleur du texte des sous-menu */ } 
.dropdownmenu ul li:hover a {   
    color: #f00; /* Couleur du texte des sous-menu au survol */
}

Notre menu est terminé !

Code complet

Voici les deux fichiers HTML et CSS complets et entièrement fonctionnels.

Code HTML

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">

    </head>
    <body>
		<ul class="dropdownmenu">
		  <li><a href="#">Menu 1</a></li>
		  <li><a href="#">Menu 2</a>
			<ul>
			  <li><a href="#">Sous-Menu 2.1</a></li>
			  <li><a href="#">Sous-Menu 2.2</a></li>
			  <li><a href="#">Sous-Menu 2.3</a></li>
			  <li><a href="#">Sous-Menu 2.4</a></li>
			</ul>
		  </li>
		  <li><a href="#">Menu 3</a>
			<ul>
			  <li><a href="#">Sous-Menu 3.1</a></li>
			  <li><a href="#">Sous-Menu 3.2</a></li>
			  <li><a href="#">Sous-Menu 3.3</a></li>
			  <li><a href="#">Sous-Menu 3.4</a></li>
			</ul>
		  </li>
		  <li><a href="#">Menu 4</a></li>
		</ul>
    </body>
</html>

Code CSS

Le fichier est commenté afin de vous permettre de facilement personnaliser les dimensions et les couleurs de votre menu.

body {
  background-color: #eee;
}
/* Dropdown menu */
.dropdownmenu {
  background-color: #666;
  width: 140px; /* Largeur du menu */
}
.dropdownmenu,
.dropdownmenu ul {
  /* Suppression des puces et des marges pour les listes du menu et des sous-menus */
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.dropdownmenu ul {
  /* Masquage des sous-menu par defaut */
  display: none;
}
.dropdownmenu li {
  /* Positionnement relative des elements de menu pour pouvoir positionner les sous-menu correctement en absolu */
  position: relative;
}
.dropdownmenu a {
  /* On transforme les liens en bloc pour pouvoir les dimensionner */
  display: block;

  /* Dimensions des liens */
  width: 120px;
  height: 30px;
  line-height: 30px; /* Doit etre equivalent a la hauteur du menu pour centrer le texte verticalement */
  padding: 3px 10px;

  text-align: center;
}
.dropdownmenu li:hover ul {
  /* Affichage du soumenu au survol */
  display: block;

  /* Positionnement du sous-menu */
  position: absolute;
  top: 0px;
  left: 140px; /* Decalage du sous-menu de la largeur du menu */
  z-index: 100; /* Gestion de la superposition des sous-menus par rapport au reste de la page */
}
.dropdownmenu ul a {
  /* Changement de l'affichage des liens des sous-menus pour ne pas les afficher en inline-block comme les liens de menu, ils seront donc verticaux */
  display: block;
}

/* Gestion des couleurs */
.dropdownmenu li {
  background-color: #666; /* Couleur d'arriere-plan du menu */
}
.dropdownmenu li a {
  color: #ccc; /* Couleur du texte du menu */
}
.dropdownmenu li:hover {
  background-color: #000; /* Couleur d'arriere-plan du menu au survol */
}
.dropdownmenu li:hover a {
  color: #fff; /* Couleur du texte du menu au survol */
}
.dropdownmenu ul li {
  background-color: #ccc; /* Couleur d'arriere-plan des sous-menu */
}
.dropdownmenu ul li:hover {
  background-color: #000; /* Couleur d'arriere-plan des sous-menu au survol */
}
.dropdownmenu ul li a {
  color: #666; /* Couleur du texte des sous-menu */
}
.dropdownmenu ul li:hover a {
  color: #f00; /* Couleur du texte des sous-menu au survol */
}

Sauf mention contraire*, l'article Menu déroulant vertical 100% CSS et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.