Comment créer : menu déroulant

Apprenez à créer un menu déroulant avec CSS.

Créez un menu déroulant survolable

Créez un menu déroulant qui s'affiche lorsque l'utilisateur place le curseur sur l'élément.

Étape 1 - Ajouter HTML :

<div class="dropup">
  <button class="dropbtn">Déroulant</button>
  <div class="dropup-content">
    <a href="#">Lien 1</a>
    <a href="#">Lien 2</a>
    <a href="#">Lien 3</a>
  </div>
</div>

Example explanation:

Vous pouvez utiliser n'importe quel élément pour ouvrir le menu déroulant, par exemple les éléments <button>, <a> ou <p>.

Créez un menu déroulant en utilisant un élément conteneur (comme <div>) et ajoutez-y des liens déroulants.

Utilisez l'élément <div> pour envelopper le bouton et <div> pour positionner correctement le menu déroulant avec CSS.

Étape 2 - Ajouter CSS :

/* Bas bouton déroulant */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* Container <div> - used for positioning the dropdown menu content required elements */
.dropup {
  position: relative;
  display: inline-block;
}
/* Dropdown menu content (hidden by default) */
.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links in the dropdown menu */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change the color of the dropdown link when the mouse hovers */
.dropup-content a:hover {background-color: #ddd}
/* Display the dropdown menu when the mouse hovers */
.dropup:hover .dropup-content {
  display: block;
}
/* Change the background color of the dropdown button when the dropdown menu content is displayed */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

Try it yourself

Example explanation:

We set the background color, padding, and other styles for the dropdown button.

.dropup class position: relative, when we want to place the dropdown menu content at the top of the dropdown button (using position: absolute)), this is necessary.

.dropup-content class contains the actual dropdown menu. It is hidden by default and will be displayed when the mouse hovers over it (see below). Note that the minimum width is set to 160px. You can change this value as needed. Tip: If you want the width of the dropdown menu content to be the same as the dropdown button, you can set the width to 100% (and use overflow: auto to enable scrolling).

We did not use borders but instead used box-shadow property to make the dropdown menu look like a 'card'. We also use z-index Place the dropdown menu in front of other elements.

:hover Le sélecteur est utilisé pour afficher le menu déroulant lorsque l'utilisateur place le curseur sur le bouton de déroulement.