Wie wird erstellt: Dropdown-Menü

Lernen Sie, wie Sie ein Dropdown-Menü mit CSS erstellen.

Erstellen Sie einhoverbares Dropdown-Menü

Erstellen Sie ein Dropdown-Menü, das angezeigt wird, wenn der Benutzer den Cursor auf das Element bewegt.

Erster Schritt - Fügen Sie HTML hinzu：

<div class="dropup">
  <button class="dropbtn">Dropup</button>
  <div class="dropup-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Example explanation:

Sie können jedes Element verwenden, um ein Dropdown-Menü zu öffnen, z.B. <button>, <a> oder <p>-Elemente.

Verwenden Sie ein Behälterelement (wie <div>) zum Erstellen eines Dropdown-Menüs und fügen Sie darin Dropdown-Links hinzu.

Verwenden Sie das <div>-Element, um den Button und den <div> zu umschließen, um sicherzustellen, dass das CSS das Dropdown-Menü korrekt positioniert.

Zweiter Schritt - Fügen Sie CSS hinzu：

/* 下拉按钮 */
.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 above the dropdown button (using position: absolute)), which 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, set the width to 100% (and use overflow: auto to enable scrolling).

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

:hover Der Selector wird verwendet, um das Ausklappenmenü anzuzeigen, wenn der Benutzer den Mauszeiger auf den Ausklappknopf bewegt.