本文详解如何基于纯 html + css 实现嵌套式下拉子菜单（二级菜单），无需 javascript，通过相邻兄弟选择器（`+`）和 `:hover` 状态精准控制显示逻辑，并提供可直接运行的完整代码与关键注意事项。
要为现有下拉菜单添加子菜单（即二级菜单），核心在于结构嵌套 + CSS 精准定位 + 邻居选择器触发。原代码中 .dropdown-content 仅包含 <a> 标签，无法承载子菜单；我们需要将某个菜单项（如第一个 level_1）与其对应的子菜单 <div class="sub-1"> 设为相邻兄弟元素，再利用 a:hover + .sub-1 规则实现悬停展开。
以下是优化后的完整实现：
✅ HTML 结构（关键：相邻兄弟关系）
<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 (has submenu)</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 样式（重点：定位与悬停逻辑）
.dropdown .dropbtn {
border: none;
outline: none;
color: #0F4391;
padding: 8.5px 15px;
background-color: inherit;
font-family: inherit;
cursor: pointer;
}
.dropdown-content,
.sub-1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
z-index: 1000;
}
.dropdown-content a,
.sub-1 a {
color: #0F4391;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* 主菜单悬停时显示一级菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 关键：当第一个菜单项被悬停时，显示其后紧邻的 .sub-1 */
.dropdown-content a:nth-child(1):hover + .sub-1 {
display: block;
margin-left: 160px; /* 向右偏移，避免重叠 */
margin-top: -36px; /* 微调垂直对齐（= a 的 height ≈ 12+12+12=36px） */
top: 0; /* 保证顶部对齐 */
}
/* 子菜单自身也支持悬停高亮（可选增强体验） */
.sub-1 a:hover {
background-color: #e0e0e0;
color: #000;
}
/* 响应式兼容：移动端需关闭子菜单自动展开（因触摸无 hover） */
@media screen and (max-width: 600px) {
.sub-1 { display: none !important; }
}⚠️ 注意事项与最佳实践
- 结构必须严格相邻：<a> 和其子菜单 <div class="sub-1"> 必须是 DOM 中连续的兄弟节点，中间不能插入其他元素（如注释、空格文本节点不影响，但 <br> 或 <span> 会破坏 + 选择器）。
- .sub-1 默认 display: none：确保它不会在未悬停时意外显示。
- 定位依赖 position: absolute：.sub-1 的 margin-left 是相对于 .dropdown-content 定位的，需根据一级菜单宽度动态调整（示例中设为 160px，即 .dropdown-content 的 min-width）。
- 移动端限制：纯 CSS :hover 在触摸设备上不生效，建议在响应式断点中禁用子菜单（如上述媒体查询所示），或后续引入轻量 JS 做增强。
- 可扩展性提示：若需三级菜单，可沿用相同模式：<a> → <div class="sub-2"> → 再嵌套 <a> + <div class="sub-3">，并追加对应 :hover + .sub-2 规则。
该方案零依赖、语义清晰、性能优异，适用于大多数管理后台或导航栏场景。只需微调颜色、间距与断点，即可无缝集成至现有项目。
