js左侧下拉导航

<div class="sidebar">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="dropdown">
      <a href="#">Services</a>
      <ul class="dropdown-menu">
        <li><a href="#">Web Development</a></li>
        <li><a href="#">Mobile Development</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
  </ul>
</div>

.sidebar {
  width: 200px;
  background-color: #333;
  color: white;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul li {
  position: relative;
}

.sidebar ul li a {
  display: block;
  padding: 10px;
  color: white;
  text-decoration: none;
}

.dropdown-menu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: #444;
  width: 200px;
}

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

document.querySelectorAll('.dropdown').forEach(item => {
  item.addEventListener('click', event => {
    event.stopPropagation();
    const dropdownMenu = item.querySelector('.dropdown-menu');
    dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
  });
});

document.addEventListener('click', () => {
  document.querySelectorAll('.dropdown-menu').forEach(menu => {
    menu.style.display = 'none';
  });
});