本文详解如何基于纯 html + css 实现嵌套式下拉子菜单（二级菜单），无需 javascript，通过相邻兄弟选择器（`+`）和 `:hover` 状态精准控制显示逻辑，并提供可直接运行的完整代码与关键注意事项。
要为现有下拉菜单添加子菜单（即二级菜单），核心在于结构嵌套 + css 精准定位 + 邻居选择器触发。原代码中 .dropdown-content 仅包含 标签，无法承载子菜单；我们需要将某个菜单项（如第一个 level_1）与其对应的子菜单
设为相邻兄弟元素，再利用 a:hover + .sub-1 规则实现悬停展开。
以下是优化后的完整实现：
✅ html 结构（关键：相邻兄弟关系）
✅ 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; } }⚠️ 注意事项与最佳实践
- 结构必须严格相邻： 和其子菜单
必须是 dom 中连续的兄弟节点，中间不能插入其他元素（如注释、空格文本节点不影响，但
或 会破坏 + 选择器）。- .sub-1 默认 display: none：确保它不会在未悬停时意外显示。
- 定位依赖 position: absolute：.sub-1 的 margin-left 是相对于 .dropdown-content 定位的，需根据一级菜单宽度动态调整（示例中设为 160px，即 .dropdown-content 的 min-width）。
- 移动端限制：纯 CSS :hover 在触摸设备上不生效，建议在响应式断点中禁用子菜单（如上述媒体查询所示），或后续引入轻量 js 做增强。
- 可扩展性提示：若需三级菜单，可沿用相同模式： →