本文介绍一种纯 css 实现的二级下拉菜单方案，无需 javascript，通过相邻兄弟选择器（`+`）触发子菜单显示，兼容主流浏览器，并保持原有 dropdown 结构简洁可维护。
要为现有下拉菜单添加嵌套子菜单（即二级菜单），关键在于利用 css 相邻兄弟选择器 + 实现“悬停某项时显示其后紧邻的 .sub-1 容器”，而非依赖 :hover 作用于父容器（那样会导致所有子菜单同时展开）。该方法语义清晰、性能良好，且完全基于原生 html/CSS。
✅ 正确结构：子菜单必须是 的紧邻后续兄弟元素
HTML 中，每个可展开的菜单项 后需紧跟对应的子菜单
，且二者必须同级、连续：
✅ 核心 CSS：精准控制显示逻辑
以下 CSS 实现了「仅当悬停特定 时，才显示其后 .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) 仅适用于第一个菜单项；若需为多个项添加子菜单，请改用类名（如 ）并配合 .has-submenu:hover + .sub-1。子菜单 .sub-1 必须紧跟在 后面，中间不能有空格、注释或其它标签，否则 + 选择器失效。移动端适配需额外处理：.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），确保旧版浏览器兼容性。
通过上述结构与样式组合，你即可在不引入框架或脚本的前提下，稳定实现符合设计图（右侧弹出嵌套菜单）的专业级下拉导航。
立即学习“前端免费学习笔记（深入）”；