如何创建：上拉菜单

学习如何使用 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>

Halimbawa ng paliwanag:

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

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

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

第二步 - 添加 CSS：

/* 下拉按钮 */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* Container <div> - ginagamit para sa pagkalokasyon ng nilalaman ng dropdown menu */
.dropup {
  position: relative;
  display: inline-block;
}
/* Nilalaman ng dropdown menu (kasalukuyang nakahide) */
.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 sa dropdown menu */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Pagbaguhin ang kulay ng link kapag may mouse hover */
.dropup-content a:hover {background-color: #ddd}
/* Magpakita ng dropdown menu kapag may mouse hover */
.dropup:hover .dropup-content {
  display: block;
}
/* Pagpapatuloy ng kulay ng background ng dropdown button kapag ang nilalaman ng dropdown menu ay nakapapakita */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

Subukan nang personal

Halimbawa ng paliwanag:

Ginagamit namin ang mga estilo ng kulay ng background, padding, at iba pa para sa dropdown button.

.dropup klase na gumagamit ng position:relativekailan mayroon kaming kagustuhan na ilagay ang nilalaman ng dropdown menu sa itaas ng dropdown button (gamit ang position:absolute)

.dropup-content Ang klase ay naglalaman ng aktwal na dropdown menu. Ito ay kasalukuyang nakahide at magpapakita kapag may mouse hover (tingnan sa ibaba). Maaaring pagseserye ang pinakamaliit na lapad sa 160px. Maaari mong baguhin ang halaga na ito ayon sa pangangailangan. Tip: Kung gusto mong ang lapad ng nilalaman ng dropdown menu ay magkapareho sa lapad ng dropdown button, maglagay ng lapad sa 100% (at gamitin sa maliit na screen) overflow:auto upang ma-enable ang paggalaw()).

Hindi namin ginagamit ang border, kundi gumagamit ng box-shadow pagkilos, upang ang dropdown menu ay mukhang isang 'card'. Kami ay gumagamit din ng z-index Ilang dropdown menu ay ilagay sa harap ng ibang elemento.

:hover 选择器用于在用户将鼠标悬停在上拉按钮上时显示上拉菜单。