ตัวอย่าง Dropdown Menu แบบเรียบง่ายที่สุด ใช้ CSS Only โดย Hover ที่ปุ่มเพื่อแสดงเมนูย่อย เหมาะสำหรับปุ่ม Action หรือเมนูเล็กๆ
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> .menu-btn { background-color: #7e32d4; color: white; padding: 16px; font-size: 20px; font-weight: bolder; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; border: none; } .dropdown-menu { position: relative; display: inline-block; } .menu-content { display: none; position: absolute; background-color: #017575; min-width: 160px; z-index: 1; } .links { color: rgb(255, 255, 255); padding: 12px 16px; text-decoration: none; display: block; font-size: 18px; font-weight: bold; border-bottom: 1px solid black; } .links:hover { background-color: rgb(8, 107, 46); } .dropdown-menu:hover .menu-content { display: block; } .dropdown-menu:hover .menu-btn { background-color: #3e8e41; } </style> </head> <body> <h2>Hover over the below dropdown button to open dropdown menu</h2> <div class="dropdown-menu"> <button class="menu-btn">Open </button> <div class="menu-content"> <a class="links" href="#">Contact Us</a> <a class="links" href="#">Visit Us</a> <a class="links" href="#">About Us</a> </div> </div> </body> </html>
โครงสร้าง HTML
<div class="dropdown-menu">
<button class="menu-btn">Open</button>
<div class="menu-content">
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">Visit Us</a>
<a class="links" href="#">About Us</a>
</div>
</div>
จุดสำคัญ
- ไม่ได้อยู่ใน <nav> - เป็น Dropdown แบบอิสระ วางได้ทุกที่
- ลิงก์ใน Dropdown ใช้
display: blockเรียงแนวตั้ง - มี
border-bottomคั่นระหว่างรายการ - ปุ่มเปลี่ยนสีเมื่อ Hover (
.dropdown-menu:hover .menu-btn)
ข้อจำกัด
- ไม่ทำงานบน Touch Device (ไม่มี Hover)
- เมนูหายทันทีเมื่อเลื่อนเมาส์ออก ต้องเพิ่ม
transition-delayหรือ JS - ไม่รองรับ Keyboard Navigation (Accessibility)
ผลลัพธ์
ปุ่มม่วง "Open" Hover -> แสดง Dropdown สีเขียว 3 รายการ ขีดคั่นสีดำ Hover รายการ -> สีเขียวเข้ม
