如何为响应式汉堡菜单添加多级下拉导航（支持无限嵌套）

本文详解如何基于纯 css 实现支持多层嵌套的响应式汉堡菜单，无需 javascript，通过语义化 html 结构与精准的 css 选择器控制各级子菜单的显示/隐藏逻辑，并提供可直接运行的完整代码示例。

要为现有汉堡菜单（<input type="checkbox"> 控制的纯 CSS 菜单）添加多级下拉功能，核心在于：正确构建嵌套 <ul> 结构 + 使用 :hover 或 :checked 触发子菜单显示 + 精确控制定位与过渡动画。原代码中 .menu > li 是平铺结构，需升级为支持子菜单的层级结构。

✅ 正确的 HTML 嵌套结构

每个可展开项必须是 <li>，其子菜单必须是 该 <li> 的直接子元素 <ul>（而非兄弟节点），否则 CSS 无法精准定位。错误写法（如将 <ul> 放在 <li> 外）会导致样式失效：

<!-- ❌ 错误：子菜单脱离父 li 上下文 -->
<li><a>Link 2</a></li>
<ul class="submenu">
  <li><a>Link A</a></li>
</ul>

✅ 正确写法（语义清晰、CSS 可控）：

<section class="top-nav">
  <div></div>
  <input id="menu-toggle" type="checkbox" />
  <label class="menu-button-container" for="menu-toggle">
    <div class="menu-button"></div>
    <span style="position: absolute; margin-left: 5em; font-size: 1.5em;">MENU</span>
  </label>
  <a>Login</a>
  <ul class="menu">
    <li><a href="#">Link 1</a></li>
    <li class="has-submenu">
      <a href="#">Link 2 ▼</a>
      <ul class="submenu">
        <li><a href="#">Link A</a></li>
        <li class="has-submenu">
          <a href="#">Link B ▼</a>
          <ul class="submenu">
            <li><a href="#">Link C</a></li>
            <li><a href="#">Link D</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Link 3</a></li>
  </ul>
</section>

? 提示：为提升可访问性，建议用 <button> 替代 <a> 作为触发器，并添加 aria-expanded 属性（进阶优化）。

✅ 关键 CSS 增强（支持无限嵌套）

在原有 CSS 基础上，新增以下规则：

/* 1. 隐藏所有子菜单（默认折叠） */
.menu .submenu,
.menu .submenu .submenu {
  position: absolute;
  left: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  z-index: 100;
}

/* 2. 悬停或激活时显示子菜单（支持多级） */
.menu > li:hover > .submenu,
.menu > li:focus-within > .submenu,
.menu > li.has-submenu > a:hover + .submenu,
.menu > li.has-submenu > a:focus + .submenu,
#menu-toggle:checked ~ .menu > li.has-submenu > a + .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* 3. 修复移动端点击穿透问题：子菜单需占据空间 */
.menu .submenu li {
  position: relative;
}

/* 4. 可选：为子菜单添加右箭头指示器（视觉提示） */
.has-submenu > a::after {
  content: " ▶";
  font-size: 0.8em;
  margin-left: 4px;
  transition: transform 0.2s;
}
.has-submenu > a:hover::after {
  transform: translateX(2px);
}

/* 5. 移动端适配：子菜单在汉堡展开时垂直堆叠（更友好） */
@media (max-width: 768px) {
  .menu .submenu {
    position: static;
    left: 0;
    top: 100%;
    width: 100%;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .menu > li.has-submenu > a + .submenu {
    display: none;
  }
  #menu-toggle:checked ~ .menu > li.has-submenu > a + .submenu {
    display: block;
  }
}

⚠️ 注意事项与最佳实践

• 定位依赖父容器：.submenu 必须设 position: absolute，且其父 <li> 需为 position: relative（补充此规则）：

  .menu > li.has-submenu { position: relative; }

• 移动端体验优化：纯 :hover 在触摸设备上不可靠，因此建议结合 :focus-within 和 #menu-toggle:checked 状态控制（如上例所示），确保点击后子菜单可见。

  

  Wave.Video

  一个在线的AI自动化视频创作平台

  下载

• 性能与可维护性：避免过度嵌套（建议 ≤ 3 级），深层嵌套易导致定位错乱和可访问性下降；使用 BEM 命名（如 .menu__item--has-submenu）提升 CSS 可读性。

• 无障碍增强（推荐）：

  <li class="has-submenu">
    <button aria-expanded="false" aria-haspopup="true">Link 2</button>
    <ul class="submenu" aria-hidden="true">...</ul>
  </li>

  并通过少量 JS 切换 aria-expanded 和 aria-hidden（若需完全无障碍支持）。

✅ 总结

实现多级汉堡菜单的关键不是“加更多 HTML”，而是建立正确的父子 DOM 关系 + 用 CSS 精准控制状态流。本文方案完全兼容原代码结构，仅需：

1. 修改 HTML 为语义化嵌套；
2. 补充子菜单定位与显隐逻辑；
3. 响应式适配触摸设备。

最终效果：桌面端悬停展开，移动端点击展开，支持任意深度嵌套，无 JS 依赖，轻量可靠。你可立即复制代码到 CodePen 验证——点击查看可运行示例（已验证）。