สร้าง Dropdown Menu ใช้ CSS Only (ไม่ต้อง JavaScript) โดยใช้ :hover บน Container เพื่อแสดง/ซ่อน Dropdown Content
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> .menu-btn { background-color: #040008; 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; } nav{ background-color: #017575; } .links,.links-hidden{ display: inline-block; color: rgb(255, 255, 255); padding: 12px 16px; text-decoration: none; font-size: 18px; font-weight: bold; } .links-hidden{ display: block; } .links{ display: inline-block; } .links-hidden:hover,.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 on the below dropdown button in navbar to open dropdown menu</h2> <nav> <a class="links" href="#">HOME</a> <a class="links" href="#">EMPLOYEES</a> <a class="links" href="#">CAREER</a> <div class="dropdown-menu"> <button class="menu-btn">Open <</button> <div class="menu-content"> <a class="links-hidden" href="#">Contact Us</a> <a class="links-hidden" href="#">Visit Us</a> <a class="links-hidden" href="#">About Us</a> </div> </div> </nav> </body> </html>
ความแตกต่างจากบทความก่อนหน้า
- เป็น Dropdown แบบ Standalone (ไม่มี Hamburger/Responsive)
- ใช้ <button> เป็น Trigger แทน <a>
- Dropdown Content ใช้
min-width: 160pxไม่ได้กว้างเต็มหน้าจอ - โครงสร้างเรียบง่าย เข้าใจง่าย สำหรับเรียนรู้พื้นฐาน
หลักการ CSS
.dropdown-menu { position: relative; }- จุดอ้างอิงสำหรับ Absolute positioning.menu-content { position: absolute; display: none; }- ซ่อนไว้ ตำแหน่งสัมพัทธ์ Container.dropdown-menu:hover .menu-content { display: block; }- Hover Container -> แสดง Content
ผลลัพธ์
Navbar สีเขียว 3 ลิงก์ + ปุ่ม "Open <<" Hover ปุ่ม -> แสดง Dropdown 3 รายการ สีเขียวอ่อน
