Dropdown menus are a must-have in modern websites for clean and organized navigation. Whether you're building your first portfolio site or a full-fledged web app — this guide will show you how to create a simple and stylish dropdown menu using just HTML and CSS (no JavaScript needed!).
🛠️ What You’ll Learn
How to structure a navigation bar using HTML
How to style it with CSS
How to reveal a dropdown on hover
How to make it responsive-friendly (bonus tip)
`<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dropdown Menu</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav class="navbar"> <ul class="nav-menu"> <li><a href="#">Home</a></li> <li class="dropdown"> <a href="#">Services ▾</a> <ul class="dropdown-menu"> <li><a href="#">Web Design</a></li> <li><a href="#">Development</a></li> <li><a href="#">SEO</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </body> </html>` `` `* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; } .navbar { background-color: #333; } .nav-menu { list-style: none; display: flex; padding: 10px 20px; } .nav-menu li { position: relative; list-style: none; } .nav-menu li a { color: white; text-decoration: none; padding: 10px 20px; display: block; } .nav-menu li a:hover { background-color: #555; } /* Dropdown menu hidden by default */ .dropdown-menu { display: none; position: absolute; top: 40px; left: 0; background-color: #444; min-width: 150px; z-index: 999; } .dropdown-menu li a { padding: 10px; color: white; } .dropdown-menu li a:hover { background-color: #666; } /* Show dropdown on hover */ .dropdown:hover .dropdown-menu { display: block; }` 📱 Bonus: Make It Responsive (Optional)
Use media queries to make the menu stack vertically on small screens or convert it into a hamburger menu later.
🔚 Conclusion
And that’s it! You’ve just built a simple and clean dropdown navigation menu using only HTML and CSS. Perfect for your next project or personal website. 💡
💬 Let me know in the comments if you'd like a version with JavaScript or a mobile-responsive dropdown!
🔗 Follow for More!
💻 I post web dev tutorials for beginners
❤️ Like & share if you found this helpful
Top comments (0)