js 好看的菜单

<nav class="navbar">
  <ul class="nav-menu">
    <li class="nav-item"><a href="#home">Home</a></li>
    <li class="nav-item"><a href="#about">About</a></li>
    <li class="nav-item dropdown">
      <a href="#services" class="dropdown-toggle">Services</a>
      <ul class="dropdown-menu">
        <li><a href="#web">Web Development</a></li>
        <li><a href="#mobile">Mobile Development</a></li>
      </ul>
    </li>
    <li class="nav-item"><a href="#contact">Contact</a></li>
  </ul>
</nav>

.navbar {
  background-color: #333;
}

.nav-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-item {
  position: relative;
}

.nav-item a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

.nav-item a:hover {
  background-color: #111;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  top: 50px;
}

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

.dropdown:hover .dropdown-menu {
  display: block;
}

// 可选：添加一些交互功能，例如点击外部关闭下拉菜单
document.addEventListener('click', function(event) {
  if (!event.target.matches('.dropdown-toggle')) {
    var dropdowns = document.getElementsByClassName('dropdown-menu');
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.style.display === 'block') {
        openDropdown.style.display = 'none';
      }
    }
  }
});