本文介绍一种纯 css 实现的二级下拉菜单方案，无需 javascript，通过相邻兄弟选择器（`+`）触发子菜单显示，兼容主流浏览器，并保持原有 dropdown 结构简洁可维护。
要为现有下拉菜单添加嵌套子菜单（即二级菜单），关键在于利用 CSS 相邻兄弟选择器 + 实现“悬停某项时显示其后紧邻的 .sub-1 容器”，而非依赖 :hover 作用于父容器（那样会导致所有子菜单同时展开）。该方法语义清晰、性能良好，且完全基于原生 HTML/CSS。
✅ 正确结构：子菜单必须是 <a> 的紧邻后续兄弟元素
HTML 中，每个可展开的菜单项 <a> 后需紧跟对应的子菜单 <div class="sub-1">，且二者必须同级、连续：
<div class="dropdown" id="myDropdown">
<button class="dropbtn">
<i style="font-size:24px" class="fa"></i> level_0
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- 第一项 + 其子菜单 -->
<a href="#">level_1 (可展开)</a>
<div class="sub-1">
<a href="#">level_11</a>
<a href="#">level_12</a>
<a href="#">level_13</a>
</div>
<!-- 其他普通项（无子菜单） -->
<a href="#">level_1</a>
<a href="#">level_1</a>
</div>
</div>✅ 核心 CSS：精准控制显示逻辑
以下 CSS 实现了「仅当悬停特定 <a> 时，才显示其后 .sub-1」的效果：
/* 所有子菜单默认隐藏 */
.dropdown-content .sub-1,
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
z-index: 1;
}
/* 主菜单项悬停样式 */
.dropdown-content a:hover {
background-color: #e0e0e0;
color: #0F4391;
}
/* 关键：悬停第1个菜单项时，显示其后紧邻的 .sub-1 */
.dropdown-content a:nth-child(1):hover + .sub-1 {
display: block;
margin-left: 160px; /* 水平右移，形成嵌套视觉 */
margin-top: -36px; /* 微调垂直对齐（根据行高调整） */
top: 0; /* 确保定位基准一致 */
left: 100%; /* 更健壮的定位方式（推荐替代 margin-left） */
}
/* 可选：为子菜单项增加左缩进或边框增强层级感 */
.sub-1 a {
padding-left: 24px; /* 缩进体现层级 */
border-left: 3px solid #0F4391;
}⚠️ 重要注意事项：:nth-child(1) 仅适用于第一个菜单项；若需为多个项添加子菜单，请改用类名（如 <a href="#" class="has-submenu">）并配合 .has-submenu:hover + .sub-1。子菜单 .sub-1 必须紧跟在 <a> 后面，中间不能有空格、注释或其它标签，否则 + 选择器失效。移动端适配需额外处理：.sub-1 在响应式断点中建议设为 position: static 或 display: block，避免绝对定位导致布局错乱。如需支持三级菜单，可递归套用 .sub-2 和 a:hover + .sub-2，但层级过深会降低可用性，建议谨慎使用。
✅ 最佳实践建议
- 使用语义化类名（如 .dropdown-item, .submenu）替代 .sub-1，提升可读性与可维护性；
- 为无障碍访问添加 aria-haspopup="true" 和 aria-expanded 属性（需配合少量 JS 动态控制）；
- 在生产环境启用 CSS 前缀自动补全（如 Autoprefixer），确保旧版浏览器兼容性。
通过上述结构与样式组合，你即可在不引入框架或脚本的前提下，稳定实现符合设计图（右侧弹出嵌套菜单）的专业级下拉导航。
立即学习“前端免费学习笔记（深入）”；
