如何創建：可懸停的下拉菜單

學習如何使用 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>

ตัวอย่างที่อธิบาย

使用任何元素打開下拉菜單，例如 <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;
}
/* สิ่งที่แสดงลงคลิกด้านล่าง (ซ่อนโดยเริ่มต้น) */
.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 เพื่อให้เปิดการเลื่อนที่หน้าจอเล็ก (overflow: auto)

เราไม่ใช้เส้นขอบ แต่ใช้ box-shadow ตัวแปรเพื่อทำให้รายการลงคลิกด้านล่างดูเหมือน 'บัตร' ของไอดีเกมส์。เรายังใช้ z-index จัดให้รายการลงคลิกด้านล่างอยู่ข้างหน้าอื่นๆ

:hover เลือกเครื่องมือสำหรับแสดงรายการลงคลิกด้านล่างเมื่อผู้ใช้เคลื่อนเมาส์ไปที่ปุ่มรายการลงคลิกด้านล่าง

เพจที่เกี่ยวข้อง

教程：CSS 下拉菜单

教程：如何创建可点击的下拉菜单