本文详解如何基于纯 css 实现支持多层嵌套的响应式汉堡菜单，无需 javascript，通过语义化 html 结构与精准的 css 选择器控制各级子菜单的显示/隐藏逻辑，并提供可直接运行的完整代码示例。
要为现有汉堡菜单（ 控制的纯 CSS 菜单）添加多级下拉功能，核心在于：正确构建嵌套 结构 + 使用 :hover 或 :checked 触发子菜单显示 + 精确控制定位与过渡动画
。原代码中 .menu > li 是平铺结构，需升级为支持子菜单的层级结构。
✅ 正确的 HTML 嵌套结构
每个可展开项必须是
- 放在
- 外）会导致样式失效：
- Link 2
✅ 正确写法（语义清晰、CSS 可控）：
Login
? 提示：为提升可访问性，建议用 替代 作为触发器，并添加 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，且其父
- 需为 position: relative（补充此规则）：
.menu > li.has-submenu { position: relative; } 移动端体验优化：纯 :hover 在触摸设备上不可靠，因此建议结合 :focus-within 和 #menu-toggle:checked 状态控制（如上例所示），确保点击后子菜单可见。
性能与可维护性：避免过度嵌套（建议 ≤ 3 级），深层嵌套易导致定位错乱和可访问性下降；使用 BEM 命名（如 .menu__item--has-submenu）提升 CSS 可读性。
-
无障碍增强（推荐）：
并通过少量 JS 切换 aria-expanded 和 aria-hidden（若需完全无障碍支持）。
✅ 总结
实现多级汉堡菜单的关键不是“加更多 HTML”，而是建立正确的父子 DOM 关系 + 用 CSS 精准控制状态流。本文方案完全兼容原代码结构，仅需：
- 修改 HTML 为语义化嵌套；
- 补充子菜单定位与显隐逻辑；
- 响应式适配触摸设备。
最终效果：桌面端悬停展开，移动端点击展开，支持任意深度嵌套，无 JS 依赖，轻量可靠。你可立即复制代码到 CodePen 验证——点击查看可运行示例（已验证）。
