DropDown Menu

by greatCar

HTML

<div class="outer">
  <nav class="nav-menu">
    <div class="menu-toggle">☰</div> <!-- Toggle button for mobile -->
    <ul>
      <li><a href="#">Home</a></li>
      <li class="dropdown">
        <a href="#">About</a>
        <ul class="dropdown-menu">
          <li><a href="#">Our Story</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Careers</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#">Services</a>
        <ul class="dropdown-menu">
          <li><a href="#">Web Design</a></li>
          <li><a href="#">SEO</a></li>
          <li><a href="#">Marketing</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#">Contact</a>
        <ul class="dropdown-menu">
          <li><a href="#">Support</a></li>
          <li><a href="#">Location</a></li>
          <li><a href="#">Feedback</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

CSS

.nav-menu ul {
  display: flex;
  flex-direction: row; /* Align main menu horizontally */
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.nav-menu a {
  text-decoration: none;
  color: #3498db;
  padding: 10px 15px;
  display: block;
}

.dropdown {
  position: relative; /* Enables dropdown positioning */
}
.dropdown-menu {
  display: none; /* Initially hidden */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f0f0f0;
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: dropdown-animation 0.3s ease forwards; /* Applies the animation */
  opacity: 0;
  }

.dropdown-menu li {
  padding: 10px 20px;
}

.dropdown-menu a {
  color: #333; /* Dropdown link color */
  font-size: 16px;
}
.dropdown:hover .dropdown-menu {
  display: block; /* Shows dropdown on hover */
  }

@media screen and (max-width: 768px) {
  .nav-menu ul {
    flex-direction: column; /* Stack menu items vertically on mobile */
    display: none; /* Hide by default */
    background-color: #f0f0f0;
  }

  .nav-menu ul.open {
    display: flex; /* Show when "open" class is added */
  }

  .menu-toggle {
    display: block; /* Toggle button visible on mobile */
  }
}
@keyframes dropdown-animation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);

JavaScript

document.querySelector('.menu-toggle').addEventListener('click', function () {
  const menu = document.querySelector('.nav-menu ul');
  menu.classList.toggle('open'); // Toggle visibility of main menu
});

document.querySelectorAll('.dropdown > a').forEach(item => {
  item.addEventListener('click', function (e) {
    e.preventDefault(); // Prevent default link behavior
    const dropdownMenu = this.nextElementSibling;
    dropdownMenu.classList.toggle('open'); // Toggle visibility of dropdown
  });
});