วิธีสร้าง Subnavigation Menu (เมนูย่อย/ Dropdown) ด้วย CSS

สร้าง Dropdown Menu (Subnavigation) ใช้ CSS เพียงอย่างเดียว โดยใช้ :hover บน Container เพื่อแสดง Submenu ไม่ต้องใช้ JavaScript

ตัวอย่างโค้ด

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body {    font-family: Arial, Helvetica, sans-serif;    margin: 0; } nav {    overflow: hidden;    background-color: rgb(0, 52, 73); } nav .links {    float: left;    font-size: 16px;    color: white;    text-align: center;    padding: 14px 16px;    text-decoration: none; } .subnav {    float: left;    overflow: hidden; } .subnav .sub-btn {    font-size: 16px;    border: none;    outline: none;    color: white;    padding: 14px 16px;    background-color: rgb(0, 109, 67);    margin: 0; } nav .links:hover, .subnav:hover .sub-btn {    background-color: rgb(101, 219, 255);    color: black;    font-weight: bolder; } .sub-content {    display: none;    position: absolute;    left: 0;    background-color: rgb(0, 156, 83);    width: 100%;    z-index: 1; } .sub-content a {    float: left;    color: white;    text-decoration: none; } .sub-content a:hover {    background-color: #eee;    color: black; } .subnav:hover .sub-content {    display: block; } </style> </head> <body> <nav> <a class="links" href="#">Home</a> <a class="links" href="#">Contact</a> <a class="links" href="#">About Us</a> <a class="links" href="#">More Info</a> <div class="subnav"> <button class="sub-btn">Our Social Media></button> <div class="sub-content"> <a class="links" href="#">Facebook</a> <a class="links" href="#">Twitter</a> <a class="links" href="#">LinkedIn</a> <a class="links" href="#">Instagram</a> </div> </div> </nav> </body> </html>

หลักการทำงาน

1. .subnav - Container ครอบปุ่มและ Submenu ใช้ position: relative (implied)
2. .sub-content - Submenu ใช้ position: absolute; display: none; left: 0; width: 100%
3. .subnav:hover .sub-content { display: block; } - hover ที่ container -> แสดง submenu
4. z-index: 1 - ให้อยู่เหนือเนื้อหาต่างๆ