本文介绍一种基于 css 层叠与相对定位原理的通用方案，仅需一套可复用的样式规则，即可支持任意深度的子菜单展开与缩进，完全避免为每层嵌套重复编写 css 选择器。
本文介绍一种基于 css 层叠与相对定位原理的通用方案，仅需一套可复用的样式规则，即可支持任意深度的子菜单展开与缩进，完全避免为每层嵌套重复编写 css 选择器。
实现真正“可扩展”的嵌套导航菜单，关键在于放弃为每一级子菜单定义独立选择器（如 .sub-menu-1, .sub-menu-2），转而利用 CSS 的天然特性：后代选择器的层级穿透能力与静态/相对定位下的嵌套偏移继承性。只要 HTML 结构遵循一致的嵌套模式（即所有子菜单均为
/* 所有子菜单默认隐藏 */
.sub-menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
}
/* 仅对「直接位于导航项之后」的子菜单设置绝对定位（第一级下拉） */
.nav-list > li > .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background-color: #f8f9fa;
border: 1px solid #e2e6ea;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
z-index: 1000;
}
/* 所有 .sub-menu 的子菜单（即第二级及更深）自动继承相对定位 + 左侧缩进 */
.sub-menu .sub-menu {
position: relative;
left: 100%; /* 向右水平展开，避免遮挡父菜单 */
top: -100%; /* 对齐顶部，实现「右侧弹出」效果 */
margin-top: 0;
}
/* 统一启用展开状态 */
.sub-menu.open {
display: block;
}
/* 可选：为各级子菜单添加视觉区分（如背景色微调或边框） */
.sub-menu {
background-color: #fff;
}
.sub-menu .sub-menu {
background-color: #f5f7fa;
}? 为什么这样可行？
因为 .sub-menu .sub-menu 是一个后代选择器，它匹配 任意深度 中嵌套在 .sub-menu 内部的 .sub-menu 元素。无论嵌套 3 层还是 10 层，该规则均生效，且 position: relative + left: 100% 会使其相对于最近的已定位祖先（即其父级 .sub-menu）向右展开，形成连贯的「级联滑出」动效，完美契合 目标视频中前 34 秒 的交互逻辑。
✅ 简洁可靠的 JavaScript 控制逻辑
样式交由 CSS 处理，JS 仅负责状态切换（开/关），保持职责分离：
// 为每个触发链接绑定展开逻辑（支持任意深度）
document.querySelectorAll('.nav-list a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault(); // 阻止跳转（可选）
const nextMenu = this.nextElementSibling;
if (!nextMenu || !nextMenu.classList.contains('sub-menu')) return;
// 关闭同级其他子菜单（可选增强体验）
const siblings = Array.from(this.parentElement.children)
.filter(el => el !== this.parentElement && el.querySelector('.sub-menu'));
siblings.forEach(sib => sib.querySelector('.sub-menu')?.classList.remove('open'));
// 切换当前子菜单
nextMenu.classList.toggle('open');
});
});
// 【增强建议】点击外部区域关闭所有菜单
document.addEventListener('click', (e) => {
if (!e.target.closest('.nav-list')) {
document.querySelectorAll('.sub-menu.open').forEach(el => el.classList.remove('open'));
}
});✅ 完整 HTML 结构示例（开箱即用）
<nav>
<ul class="nav-list">
<li><a href="#home">首页</a></li>
<li>
<a href="#goods">商品 ▼</a>
<ul class="sub-menu">
<li><a href="#laptops">笔记本电脑</a></li>
<li>
<a href="#accessories">配件 ▼</a>
<ul class="sub-menu">
<li><a href="#keyboards">键盘</a></li>
<li>
<a href="#mice">鼠标 ▼</a>
<ul class="sub-menu">
<li><a href="#wireless">无线鼠标</a></li>
<li><a href="#gaming">游戏鼠标</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>✅ 只需复制此结构，无需修改 CSS —— 新增任意层级子菜单，样式自动适配。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项与最佳实践
- 移动端适配：上述方案在桌面端表现优异；在移动视口（如
- 可访问性（a11y）：务必为 .sub-menu 添加 role="menu" 和每个 添加 role="menuitem"，并用 aria-expanded 动态同步状态。
- 性能提示：避免过度依赖 :hover 触发深层菜单（移动端不支持 hover），始终以 click 为主控方式。
- 视觉一致性：可通过 :nth-child(odd/even) 或 CSS 自定义属性（如 --submenu-depth）配合 JS 注入，实现深度相关的颜色/动画差异化，但非必需。
这套方案将复杂性从 CSS 选择器维护中解耦，回归 CSS 本质——描述关系，而非枚举状态。开发者只需专注 HTML 结构表达语义，样式自然延展，真正实现“写一次，无限复用”。
