Cara membuat: Menu turun yang dapat bergerak di atas

Belajar cara membuat menu turun yang dapat bergerak di atas dengan CSS.

Buat menu turun yang dapat bergerak di atas

Buat menu turun yang muncul saat pengguna memindahkan mouse ke elemen.

Kesadaran pertama - Tambahkan HTML:

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

例子解释：

Buka menu turun dengan elemen apapun, seperti tombol <button>, <a> atau elemen <p>.

Buat menu turun dengan elemen wadah (seperti <div>) dan tambahkan tautan menu turun di dalamnya.

Gunakan elemen <div> untuk membalut tombol dan <div>, untuk memastikan lokasi menu turun dengan CSS.

Kesadaran kedua - Tambahkan CSS:

/* 下拉按钮 */
.dropbtn {
  background-color: #04AA6D;
  color: putih;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* 容器<div> - 用于定位下拉菜单内容 */
.dropdown {
  position: relatif;
  display: inline-block;
}
/* 下拉内容（默认隐藏） */
.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;
}
/* 下拉菜单内的链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* 鼠标悬停时更改下拉菜单链接的颜色 */
.dropdown-content a:hover {background-color: #ddd;}
/* 鼠标悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {display: block;}
/* 显示下拉内容时更改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

亲自尝试一下

例子解释：

我们已经用背景色、内边距等对下拉菜单按钮进行了样式设置。

.dropdown 类使用 position:relative，当我们想要将下拉菜单内容放在下拉菜单按钮正下方时（使用 position:absolute），这是必需的。

.dropdown-content 类包含实际的下拉菜单。它默认是隐藏的，并将在鼠标悬停时显示（见下文）。请注意，最小宽度设置为 160px。请随意更改此设置。提示：如果您希望下拉菜单内容的宽度与下拉菜单按钮一样宽，请将宽度设置为 100%（并设置 overflow:auto 以在小屏幕上启用滚动）。

我们没有使用边框，而是使用了 box-shadow 属性来使下拉菜单看起来像一张“卡片”。我们还使用 z-index 将下拉菜单放在其他元素的前面。

:hover 选择器用于在用户将鼠标移动到下拉菜单按钮上时显示下拉菜单。

页面相关

Tutorial:Menu tarik turun CSS

Tutorial:Bagaimana untuk membuat menu tarik turun yang dapat di klik