Dropdown UL list items no animation

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 hide dropdown menus */
  position: absolute; /* Position relative to parent li */
  top: 100%; /* Place below parent menu */
  left: 0;
  background-color: #f0f0f0;
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

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

.dropdown:hover .dropdown-menu {
  display: block; /* Show dropdown on hover for desktop */
}

@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 */
  }
}

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
  });
});