Menu déroulant horizontal 100 % CSS

Création du premier niveau

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

Les liens de premier niveau du menu sont ensuite insérés dans les lignes <li></li> de la liste.

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

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

Création des 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.

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.

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

Voici un exemple de menu avec deux sous-menus :

<ul class="dropdownmenu">    <li><a href="#">Accueil</a></li>    <li><a href="#">Menu 1</a>        <ul>            <li><a href="#">Sous-Menu 1.1</a></li>            <li><a href="#">Sous-Menu 1.2</a></li>            <li><a href="#">Sous-Menu 1.3</a></li>            <li><a href="#">Sous-Menu 1.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>    <li><a href="#">Menu 3</a></li></ul>

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

Coloration du menu principal

Nous allons ajouter une couleur d’arrière-plan au menu principal pour le rendre visible.

.dropdownmenu {    background-color: #80bdcc;}

Alignement du menu principal

Utilisez Flexbox pour disposer côte à côte les éléments du menu principal. Ce mode de disposition permet également d’ajuster leur répartition dans le menu.

.dropdownmenu {  background-color: #80bdcc;  display: flex; }

Suppression des puces et des marges des listes

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

Le sélecteur .dropdownmenu cible la liste principale, tandis que .dropdownmenu ul cible les listes des sous-menus.

Voici les règles correspondantes :

/* 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 propriétés étant identiques, les deux règles peuvent être regroupées en séparant les sélecteurs par une virgule.

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

Mise en forme des liens du menu

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

• display: flex : facilite le centrage du texte dans chaque lien.
• 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 bordures dans les dimensions définies.
• width: var(--largeur-lien) : utilise la largeur définie sur le menu principal.
• min-height: 40px : garantit une hauteur minimale tout en autorisant les libellés sur plusieurs lignes.
• padding: 8px 10px : ajoute des marges intérieures autour du texte.
• color: #fff : définit la couleur du texte.
• background-color: #317f92 : définit la couleur d’arrière-plan.
• text-align: center : centre les lignes du libellé.
• text-decoration: none : supprime le soulignement.

.dropdownmenu a {  display: flex;  justify-content: center;  align-items: center;  box-sizing: border-box;  width: 120px;  min-height: 40px;  padding: 8px 10px;  color: #fff;  background-color: #317f92;  text-align: center;  text-decoration: none;}

Affichage des sous-menus au survol de la souris

Le sélecteur .dropdownmenu li:hover ul cible les sous-menus lorsqu’un élément qui les contient est survolé. La déclaration display: block permet de les rendre visibles.

.dropdownmenu li:hover ul {  display: block;}

Vous constatez que les sous-menus s’affichent bien, mais pour cela, ils étirent l’élément principal. Il faut donc les positionner correctement.

Positionnement des sous-menus

Nous allons maintenant positionner les sous-menus de manière absolue. Ce type de positionnement va permettre de retirer les sous-menus du flux normal de la page.

.dropdownmenu li:hover ul {  display: block;  position: absolute;}

Affinage de la position des sous-menus

Appliquez position: relative aux éléments <li>. Ils serviront de repères pour positionner leurs sous-menus avec position: absolute. Sans décalage supplémentaire, ce réglage ne déplace pas les éléments du menu principal.

.dropdownmenu li {  position: relative;}

Nous pouvons maintenant ajuster le positionnement des sous-menus via le sélecteur .dropdownmenu li:hover ul

• top: 100% : place le sous-menu immédiatement sous l’élément qui le contient, quelle que soit sa hauteur.
• left: 0 : aligne son bord gauche avec celui de cet élément.
• 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;  position: absolute;  top: 100%;  left: 0px;  z-index: 100;}

Personnalisation des liens des sous-menus au survol

Le sélecteur .dropdownmenu ul a:hover cible les liens des sous-menus lorsqu’ils sont survolés. Il permet ici de modifier leur couleur d’arrière-plan.

.dropdownmenu ul a:hover {  background-color: #ac9933;}