✨ How to Make Dropdown Menu Using HTML & CSS 🔥 | Step-by-Step Tutorial for Beginners

#webdev #beginners #html #tutorial

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