如何创建：可悬停的下拉菜单

学习如何使用 CSS 创建可悬停的下拉菜单。

创建可悬停的下拉菜单

创建一个下拉菜单，当用户将鼠标移动到元素上时显示该菜单。

第一步 - 添加 HTML：

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

Eksempel forklaring:

使用任何元素打开下拉菜单，例如 <button>、<a> 或 <p> 元素。

使用容器元素（如 <div>）创建下拉菜单，并在其中添加下拉菜单链接。

使用 <div> 元素将按钮和 <div> 包装起来，以便使用 CSS 正确定位下拉菜单。

第二步 - 添加 CSS：

/* 下拉按钮 */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* 容器<div> - 用于定位下拉菜单内容 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Rullemenuens indhold (skjult som standard) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links i rullemenuen */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Ændre farven på rullemenuens links ved museoverførsel */
.dropdown-content a:hover {background-color: #ddd;}
/* Vis rullemenuen ved museoverførsel */
.dropdown:hover .dropdown-content {display: block;}
/* Ændre rullemenuknappens baggrundsfarve, når indholdet vises */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

Prøv det selv

Eksempel forklaring:

Vi har allerede foretaget stilindstillinger for rullemenuknappen med baggrundsfarve, indre kantlinjer osv.

.dropdown klassen bruger position:relativenår vi vil have rullemenuens indhold placeret direkte under rullemenuknappen (brug position:absolute)

.dropdown-content Klassen indeholder den faktiske rullemenu. Den er som standard skjult og vises ved museoverførsel (se nedenfor). Bemærk, at minimumsbredden er sat til 160px. Du kan frit ændre denne indstilling. Tip: Hvis du vil have rullemenuens indholdsbredde at være den samme som rullemenuknappen, skal du sætte bredden til 100% (og sætte overflow:auto for at aktivere rulning på små skærme).

Vi bruger ikke kanter, men box-shadow egenskab for at gøre rullemenuen udseende som et 'kort'. Vi bruger også z-index Placer rullemenuen foran andre elementer.

:hover Vælgeren bruges til at vise rullemenuen, når brugeren flytter musen over rullemenuknappen.

Relaterede sider

Tilrettelæggelse:CSS rullemenu

Tilrettelæggelse:Sådan opretter man en klikkelig rullemenu