如何让HTML/CSS代码中的导航下拉菜单正常工作？

一、基础实现代码 #

下面是一套兼容桌面端hover、移动端点击的完整下拉菜单代码，直接复制就能运行：

HTML结构

<nav class="navbar">
  <ul class="nav-menu">
    <li class="nav-item">
      <a href="#" class="nav-link">首页</a>
    </li>
    <li class="nav-item dropdown">
      <a href="#" class="nav-link dropdown-toggle">产品</a>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a href="#">产品A</a></li>
        <li class="dropdown-item"><a href="#">产品B</a></li>
        <li class="dropdown-item"><a href="#">产品C</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">关于我们</a>
    </li>
  </ul>
</nav>

CSS样式

/* 导航基础样式 */
.navbar {
  background-color: #333;
  padding: 0 1rem;
}

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

.nav-item {
  position: relative; /* 核心：为下拉菜单提供定位基准 */
}

.nav-link {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 1rem 0;
}

/* 下拉菜单默认隐藏 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  min-width: 150px;
  display: none;
}

.dropdown-item a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 0.5rem 1rem;
}

.dropdown-item a:hover {
  background-color: #555;
}

/* 桌面端hover触发显示 */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* 点击触发的显示类（配合JS） */
.dropdown-menu.show {
  display: block;
}

/* 移动端响应式适配 */
@media (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
  }
  .dropdown-menu {
    position: static;
    background-color: #555;
  }
}

JavaScript交互（可选，用于移动端点击触发）

// 获取所有下拉触发按钮
const dropdownToggles = document.querySelectorAll('.dropdown-toggle');

dropdownToggles.forEach(toggle => {
  toggle.addEventListener('click', (e) => {
    e.preventDefault();
    const menu = toggle.nextElementSibling;
    // 切换当前下拉菜单的显示状态
    menu.classList.toggle('show');
    
    // 关闭其他已打开的下拉菜单
    dropdownToggles.forEach(other => {
      if (other !== toggle) {
        other.nextElementSibling.classList.remove('show');
      }
    });
  });
});

// 点击页面空白处关闭所有下拉菜单
document.addEventListener('click', (e) => {
  if (!e.target.closest('.dropdown')) {
    document.querySelectorAll('.dropdown-menu').forEach(menu => {
      menu.classList.remove('show');
    });
  }
});

二、新手必掌握的核心技巧 #

• 定位逻辑是核心：下拉菜单用position: absolute时，父元素必须设置position: relative，否则下拉菜单会相对于整个页面定位，这是最容易踩的坑。
• 区分桌面/移动端交互：桌面端用hover触发更自然，移动端必须用点击（因为没有hover状态），用媒体查询适配两种场景。
• 清除默认样式：一定要重置列表的margin、padding和list-style，否则下拉菜单会自带缩进和圆点，影响布局。
• 添加交互反馈：给下拉选项加hover背景色，给触发按钮加箭头图标（可以用CSS伪元素::after实现content: "▼"），让用户明确知道这是可展开的菜单。
• 避免事件冲突：用JS实现点击触发时，要阻止链接的默认跳转（e.preventDefault()），同时添加点击空白处关闭菜单的逻辑，避免多个菜单同时打开。
• 按顺序开发：先写HTML结构（理清主菜单和下拉菜单的嵌套关系），再写CSS控制显示隐藏，最后加JS增强交互，不要混在一起写，便于排查问题。

内容的提问来源于stack exchange，提问作者ShivakumarRameshkumar