Créer un menu déroulant en CSS n’est pas si difficile. Le principe de base consiste à utiliser la balise `
1. Commencez par le HTML :
```
1. Ensuite, stylez le bouton et le contenu du menu déroulant avec du CSS :
```
/* Le conteneur du menu déroulant – il faut positionner le menu déroulant */
.dropdown {
position: relative;
display: inline-block;
}
/* Les liens du menu déroulant – on les cache par défaut */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
/* Affiche le menu déroulant lorsqu’on survole le conteneur du menu déroulant */
.dropdown:hover .dropdown-content {
display: block;
}
/* Le style du bouton du menu déroulant */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Change la couleur du bouton lorsqu’on passe sa souris dessus */
.dropbtn:hover {
background-color: #3e8e41;
}
```
Voici une explication rapide de la logique CSS:
Par défaut, nous cachons le contenu du menu déroulant en utilisant “display: none”. Lorsque nous survolons le conteneur du menu déroulant, nous changeons la propriété “display” pour afficher le contenu du menu.
C’est ainsi que vous pouvez créer un simple menu déroulant en CSS. Vous pouvez également ajouter d’avantage de styles et d’animations pour le rendre encore plus interactif et attrayant.
