如何创建：上拉菜单

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

Contoh penjelasan:

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

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

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

第二步 - 添加 CSS：

/* 下拉按钮 */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* Container <div> - digunakan untuk menempatkan elemen yang diperlukan untuk menempatkan konten menu serup */
.dropup {
  position: relative;
  display: inline-block;
}
/* Konten menu serup (dalam keadaan tersembunyi baku) */
.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;
}
/* Koneksi di dalam menu serup */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Mengubah warna koneksi saat kursor tetap diatas */
.dropup-content a:hover {background-color: #ddd}
/* Menampilkan menu serup saat kursor tetap diatas */
.dropup:hover .dropup-content {
  display: block;
}
/* Mengubah warna latar tombol menu serup saat konten menu serup muncul */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

Coba sendiri

Contoh penjelasan:

Kami menetapkan gaya warna latar, margin dalam, dan lainnya untuk tombol menu serup.

.dropup kelas position:relativekita ingin menempatkan konten menu serup di atas tombol menu serup (menggunakan position:absoluteadalah penting.

.dropup-content Kelas ini mengandung menu serup yang sebenarnya. Secara baku ia tersembunyi dan akan muncul saat kursor tetap diatas (lihat di bawah). Perhatikan, lebar minimum diatur menjadi 160px. Anda dapat mengubah nilai ini sesuai kebutuhan. Petunjuk: Jika Anda ingin lebar konten menu serup sama dengan tombol menu serup, atur lebar menjadi 100% (dan digunakan di layar kecil) overflow:auto untuk mengaktifkan penyerapan).

Kami tidak menggunakan garisan pinggir, melainkan menggunakan box-shadow aturan, supaya menu serup dianggap seperti sebuah 'kad' kami juga menggunakan z-index Tolong letakkan menu serup di hadapan elemen lain.

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