Menu déroulant horizontal 100% CSS

Création du premier niveau

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

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

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

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

<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

Nous allons maintenant aligner côte à côte les différents éléments du menu principal. Pour cela, je vous propose d’utiliser un positionnement flexible ce qui vous permettra par la suite d’ajouter assez finement la position des liens.

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

Suppression des puces et des marges des listes

Vous avez dû remarquer que les puces de la liste étaient encore visibles, il faut donc les supprimer et j’en profite pour supprimer également les marges (internes et externes) des listes par défaut.

Je vais appliquer ces modifications à la liste principales avec le sélecteur de classe .dropdowmenu, mais également aux sous-listes pour cela j’utilise le sélecteur .dropdownmenu ul (c’est à dire tous les éléments ul à l’intérieur de l’élément utilisant la classe dropdownmenu).

Je peux donc saisir le code suivant :

/* 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;
}

Dans la mesure où le code se répète, je vais plutôt favoriser la syntaxe suivante, pour traiter les deux sélecteurs simultanément en les séparant par une ,.

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

Mise en forme des boutons du menu principal

Je vous propose ici quelques options de personnalisation des liens du menu principal, à vous de personnaliser ces paramètres.

• display: block; : Les liens sont transformés en blocs pour pouvoir les dimensionner ;
• width: 100px; : On ajoute une largeur aux liens (nécessite display: block;) ;
• height: 35px; : On ajoute également une hauteur (nécessite display: block;) ;
• line-height: 35px; : Cette propriété permet de centrer verticalement le texte du lien, la valeur doit être équivalente à la hauteur du lien ;
• color: #000 ; : coloration du texte des liens ;
• background-color: #317f92; : Coloration de l’arrière-plan des liens ;
• text-decoration: none; : Suppression du soulignement ;
• padding: 3px 10px; : marges internes pour décoller le texte des bords du bouton ;
• text-align: center; : centrage du texte des liens.

.dropdownmenu a {
  display: block;
  width: 100px;
  height: 35px;
  line-height: 35px;
  color: #fff;
  background-color: #317f92;
  text-decoration: none;
  padding: 3px 10px;
  text-align: center;
}

Affichage des sous-menu au survol de la souris

Pour que les sous-menus précédemment masqués soit visibles au survol de la souris, nous allons devoir choisir le bon sélecteur. Il s’agit de cibler les élément ul lorsque l’on survole des éléments li dans l’élément utilisant la classe dropdownmenu. Le sélecteur est donc .dropdownmenu li:hover ul.

Nous avions utilisé la propriété display pour masquer les éléments, nous la réutilisons pour les ré-afficher.

.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 sortir les sous-menus du flux HTML.

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

Affinage de la position des sous-menus

Positionner un élément en absolue consiste à le positionner par rapport à l’élément parent qui a été positionné. Il est donc nécessaire de compléter notre positionnement pour s’assurer de pas avoir de problème en fonction des contextes d’utilisation du menu.

Pour cela, il faut commencer par positionner les éléments li du menu principal. C’est eux qui contiennent les sous-menus et c’est par rapport à eux que les sous-menus doivent se positionner. Dans la mesure où l’objectif n’est pas de déplacer ces éléments li mais uniquement de les positionner, nous utilisons donc position: relative; sans ajouter d’options de position complémentaires.

.dropdownmenu li {
  position: relative;
}

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

• top: 41px; : Je positionne le menu à 41px du haut. Pourquoi 41 ? Tout simplement parce que cela correspond au 35px de la hauteur des lignes auxquels je rajoute les paddings haut et bas de 3px.
• left: 0px; : Cette ligne est inutile ici, mais vous pouvez l’utiliser pour décaler les sous-menus.
• 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 {
  position: relative;
}
.dropdownmenu li:hover ul {
  display: block;
  position: absolute;
  top: 41px;
  left: 0px;
  z-index: 100;
}

Ajout de survol sur les liens des sous-menus

Pour sélectionner les liens du sous-menu lors du survol, nous allons utiliser le sélecteur .dropdownmenu ul a:hover. Ce sélecteur correspond aux liens survolés a:hover dans les listes ul de l’élément utilisant la classe dropdownmenu.

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