如何创建：上拉菜单

学习如何使用 CSS 创建上拉菜单。

创建可悬停的上拉菜单

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

第一步 - 添加 HTML：

<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>

Eksempel forklaring:

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

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

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

第二步 - 添加 CSS：

/* 下拉按钮 */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* Container <div> - bruges til at placere elementer, der kræver positionering af trækmenuens indhold */
.dropup {
  position: relative;
  display: inline-block;
}
/* Trækmenuens indhold (som standard skjult) */
.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;
}
/* Linker i nedtræksmenuen */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Ændr farven på nedtrækslinjen, når musen hæves */
.dropup-content a:hover {background-color: #ddd}
/* Vis trækmenuen, når musen hæves */
.dropup:hover .dropup-content {
  display: block;
}
/* Ændr baggrundsfarven på trækknappen, når trækmenuens indhold vises */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

Prøv det selv

Eksempel forklaring:

Vi har sat baggrundsfarve, indrykning og andre stilarter for trækknappen.

.dropup klassen bruger position:relativenår vi vil have, at trækmenuens indhold skal placeres øverst på trækknappen (brug position:absolute），det er nødvendigt.

.dropup-content klassen indeholder den faktiske trækmenu. Den er som standard skjult og vises, når musen hæves (se nedenfor). Bemærk venligst, minimumsbredden er sat til 160px. Du kan ændre denne værdi efter behov. Tip: Hvis du ønsker, at trækmenuens indholdsbredde skal være lig med trækknappen, kan du sætte bredden til 100% (og bruge på små skærme) overflow:auto for at aktivere rulning).

Vi bruger ikke kantlinjer, men box-shadow egenskab, så trækmenuen ser ud som et 'kort'. Vi bruger også z-index Placer trækmenuen foran andre elementer.

:hover Vælgeren bruges til at vise rullemenu, når brugeren holder musen over trækknappen.