Comment créer un menu déroulant en CSS (Sans Javascript)

Dernière mise à jour : 29 décembre 2021

Il existe plusieurs techniques pour créer un menu déroulant, dans cet article je vais vous montrer comment créer un menu déroulant sans JavaScript, sans Jquery, vous pouvez créer votre propre menu déroulant seulement en utilisant le CSS (Cascading Style Sheet).

Je vais commencer par vous présenter le code HTML du menu. (l’explication juste après)

<ul id="menu-easy">
<li>
<a href="#">Accueil</a>

</li>
<li>
<a href="#">Produits</a>
<ul class="sous-menu">
<li><a href="#">Sous menu</a></li>
<li><a href="#">Sous menu</a></li>
<li><a href="#">Sous menu</a></li>
</ul>
</li>
<li>
<a href="#">EasyTutoriel.com</a>
<ul class="sous-menu">
<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>
<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>
<li><a href="#">Sous menu</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul class="sous-menu">
<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>
<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>
<li><a href="#">Sous menu</a></li>
</ul>
</li>
</ul>

Dans le code HTML en haut, vous allez remarquer qu'on a utilisé ces balises : <ul> <li> <a>. Chaque menu commence avec une liste non-ordonnée qui commence par un élément <ul>. Pour chaque balise <ul> on trouve des balises <li> enchaînés, ce sont les éléments du menu. Et pour mettre un élément du menu, on a utilisé la balise <a>avec l'attribut href="#" pour définir le lien.

Voici la structure d'un menu simple sans CSS (Sans class, sans id) :

<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

Maintenant, on va ajouter le style CSS, pour rendre le menu plus agréable. Pour le fournir l'effet de montrer/cacher des sous-menus sans JavaScript. En modifiant le code qui suit, vous pouvez changer les couleurs de votre menu.

#menu-easy
{
background: 004772;
width: 644px;
height: 30px;
font-size:16px;
font-family:sans-serif,arial;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
left: 0;
}
#menu-easy li
{
float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menu-easy li a:link, #menu-easy li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: black;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menu-easy li a:hover { background-color: #003453; }
#menu-easy li a:active { background-color: #003453; }

#menu-easy .sous-menu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menu-easy .sous-menu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid #003453;
border-right: 1px solid #003453;
}
#menu-easy .sous-menu li a:link, #menu-easy .sous-menu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: #005182;
}
#menu-easy .sous-menu li a:hover
{
background-image: none;
background-color: #002c47;
}

#menu-easy li:hover > .sous-menu { display: block; }

Voilà, maintenant, vous êtes opérationnel et vous pouvez modifier le CSS pour adapter la présentation de votre site.

Amusez-vous avec votre nouveau menu !

N'oubliez pas de publier vos commentaires.

Soufiane Sabiri - Easytutoriel.com