Menu déroulant vertical 100 % CSS

Cet article présente la création d’un menu vertical avec des sous-menus qui s’affichent au survol, uniquement en HTML et CSS. Les couleurs et les dimensions du menu sont personnalisables.

Voici un aperçu du résultat final pour lequel vous pourrez personnaliser les couleurs.

Création de la structure HTML du menu

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

La structure du menu repose sur une liste non ordonnée <ul>. La classe dropdownmenu permet de cibler cette liste pour la mettre en forme en CSS. Chaque lien de premier niveau est placé dans un élément <li>.

<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>

<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>

Le premier niveau du menu est en place. Vous pouvez maintenant ajouter les sous-menus.

Pour créer un sous-menu, ajoutez une nouvelle liste <ul> à l’intérieur de l’élément <li> concerné, après son lien. Placez ensuite chaque lien du sous-menu dans un élément <li> de cette liste imbriquée.

<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 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>

Veillez à respecter l’imbrication et la fermeture des balises. Une indentation régulière facilite la lecture du code et le repérage des différents niveaux de liste.

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>

<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

Définissez la largeur du menu et sa couleur d’arrière-plan.

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

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

Supprimez les puces ainsi que les marges extérieures et intérieures de la liste principale et des sous-menus.

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

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

Les deux règles peuvent être regroupées puisqu’elles appliquent les mêmes propriétés.

.dropdownmenu,
.dropdownmenu ul {
    list-style-type: none; 
    margin: 0px;
    padding: 0px;
}

.dropdownmenu,.dropdownmenu ul {    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;
}

.dropdownmenu ul {    display: none;}

Appliquez position: relative aux éléments <li>. Ils serviront ainsi de repères pour positionner leurs sous-menus avec position: absolute.

.dropdownmenu li {
    position: relative;
}

.dropdownmenu li {    position: relative;}

Définissez ensuite l’affichage, les dimensions et l’alignement des liens du menu.

display: flex : transforme chaque lien en conteneur flexible pour faciliter le centrage de son texte.
justify-content: center : centre le contenu horizontalement.
align-items: center : centre le contenu verticalement.
box-sizing: border-box : inclut les marges intérieures et les éventuelles bordures dans les dimensions définies.
width: 100% : donne aux liens toute la largeur de leur élément parent.
min-height: 40px : définit une hauteur minimale de 40 px, tout en permettant aux liens de s’agrandir si leur texte occupe plusieurs lignes.
padding: 8px 10px : ajoute 8 px de marge intérieure en haut et en bas, et 10 px à gauche et à droite.
text-align: center : centre chaque ligne de texte lorsque le libellé s’étend sur plusieurs lignes.
text-decoration: none : supprime le soulignement des liens.

.dropdownmenu a {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    text-align: center;
    text-decoration: none;
}

.dropdownmenu a {    display: flex;    justify-content: center;    align-items: center;    box-sizing: border-box;    width: 100%;    min-height: 40px;    padding: 8px 10px;    text-align: center;    text-decoration: none;}

Le sélecteur .dropdownmenu li:hover ul permet d’afficher et de positionner les sous-menus lorsqu’un élément du menu principal est survolé.

display: block : rend le sous-menu visible.
width: 160px : lui donne la même largeur que le menu principal.
position: absolute : permet de le positionner par rapport à l’élément <li> qui le contient.
top: 0 : aligne le haut du sous-menu avec le haut de cet élément.
left: 160px : place le sous-menu à droite de cet élément, à une distance correspondant à la largeur du menu.
z-index: 100 : permet au sous-menu de passer au-dessus des éléments dont le niveau de superposition est inférieur, dans le contexte concerné.

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

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

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

/* Gestion des couleurs */ 
/* Arrière-plan du menu */
.dropdownmenu li {   
    background-color: #666;   
}
/* Texte du menu */ 
.dropdownmenu li a {
    color: #ccc; 
}
/* Arrière-plan du menu au survol */
.dropdownmenu li:hover {
    background-color: #000;  
}
/* Texte du menu au survol */
.dropdownmenu li:hover a {
    color: #fff;  
}
/* Arrière-plan des sous-menu */
.dropdownmenu ul li {
    background-color: #ccc; 
}
/* Arrière-plan des sous-menu au survol */
.dropdownmenu ul li:hover {
    background-color: #000;  
} 
/* Texte des sous-menu */
.dropdownmenu ul li a {
    color: #666;
} 
/* Texte des sous-menu au survol */
.dropdownmenu ul li:hover a {   
    color: #f00; 
}

/* Gestion des couleurs */ /* Arrière-plan du menu */.dropdownmenu li {       background-color: #666;   }/* Texte du menu */ .dropdownmenu li a {    color: #ccc; }/* Arrière-plan du menu au survol */.dropdownmenu li:hover {    background-color: #000;  }/* Texte du menu au survol */.dropdownmenu li:hover a {    color: #fff;  }/* Arrière-plan des sous-menu */.dropdownmenu ul li {    background-color: #ccc; }/* Arrière-plan des sous-menu au survol */.dropdownmenu ul li:hover {    background-color: #000;  } /* Texte des sous-menu */.dropdownmenu ul li a {    color: #666;} /* Texte des sous-menu au survol */.dropdownmenu ul li:hover a {       color: #f00; }

Notre menu est terminé !

Code complet

Voici le code HTML du menu et les règles CSS correspondantes.

Code HTML

<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>

<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>

Code CSS

Les commentaires du code CSS vous permettent de personnaliser facilement les couleurs du menu. La largeur du menu est également définie dans une variable CSS pour simplifier la personnalisation.

@charset "UTF-8";
.dropdownmenu {
  /* Variable pour la largeur du menu */
  –largeur-menu: 160px;
  background-color: #666;
  width: var(–largeur-menu);
}

.dropdownmenu,
.dropdownmenu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.dropdownmenu ul {
  display: none;
}

.dropdownmenu li {
  position: relative;
}

.dropdownmenu a {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
}

.dropdownmenu li:hover ul {
  display: block;
  width: var(–largeur-menu);
  position: absolute;
  top: 0px;
  left: var(–largeur-menu);
  z-index: 100;
}

/* Gestion des couleurs */
/* Arrière-plan du menu */
.dropdownmenu li {
  background-color: #666;
}

/* Texte du menu */
.dropdownmenu li a {
  color: #ccc;
}

/* Arrière-plan du menu au survol */
.dropdownmenu li:hover {
  background-color: #000;
}

/* Texte du menu au survol */
.dropdownmenu li:hover a {
  color: #fff;
}

/* Arrière-plan des sous-menus */
.dropdownmenu ul li {
  background-color: #ccc;
}

/* Arrière-plan des sous-menus au survol */
.dropdownmenu ul li:hover {
  background-color: #000;
}

/* Texte des sous-menus */
.dropdownmenu ul li a {
  color: #666;
}

/* Texte des sous-menus au survol */
.dropdownmenu ul li:hover a {
  color: #f00;
}

@charset "UTF-8";.dropdownmenu {  /* Variable pour la largeur du menu */  --largeur-menu: 160px;  background-color: #666;  width: var(--largeur-menu);}.dropdownmenu,.dropdownmenu ul {  list-style-type: none;  margin: 0px;  padding: 0px;}.dropdownmenu ul {  display: none;}.dropdownmenu li {  position: relative;}.dropdownmenu a {  display: flex;  justify-content: center;  align-items: center;  box-sizing: border-box;  width: 100%;  min-height: 40px;  padding: 8px 10px;  text-align: center;  text-decoration: none;}.dropdownmenu li:hover ul {  display: block;  width: var(--largeur-menu);  position: absolute;  top: 0px;  left: var(--largeur-menu);  z-index: 100;}/* Gestion des couleurs *//* Arrière-plan du menu */.dropdownmenu li {  background-color: #666;}/* Texte du menu */.dropdownmenu li a {  color: #ccc;}/* Arrière-plan du menu au survol */.dropdownmenu li:hover {  background-color: #000;}/* Texte du menu au survol */.dropdownmenu li:hover a {  color: #fff;}/* Arrière-plan des sous-menus */.dropdownmenu ul li {  background-color: #ccc;}/* Arrière-plan des sous-menus au survol */.dropdownmenu ul li:hover {  background-color: #000;}/* Texte des sous-menus */.dropdownmenu ul li a {  color: #666;}/* Texte des sous-menus au survol */.dropdownmenu ul li:hover a {  color: #f00;}

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.