本文介绍一种纯 css 实现的二级下拉菜单方案，无需 javascript，通过相邻兄弟选择器（`+`）触发子菜单显示，兼容主流浏览器，并保持原有 dropdown 结构简洁可维护。
要为现有下拉菜单添加嵌套子菜单（即二级菜单），关键在于利用 CSS 相邻兄弟选择器 + 实现“悬停某项时显示其后紧邻的 .sub-1 容器”，而非依赖 :hover 作用于父容器（那样会导致所有子菜单同时展开）。该方法语义清晰、性能良好，且完全基于原生 HTML/CSS。
✅ 正确结构：子菜单必须是 的紧邻后续兄弟元素
HTML 中，每个可展开的菜单项 后需紧跟对应的子菜单 以下 CSS 实现了「仅当悬停特定 时，才显示其后 .sub-1」的效果： 通过上述结构与样式组合，你即可在不引入框架或脚本的前提下，稳定实现符合设计图（右侧弹出嵌套菜单）的专业级下拉导航。 临沂奥硕软件有限公司拥有国内一流的企业网站管理系统，奥硕企业网站管理系统真正会打字就会建站的管理系统，其强大的扩展性可以满足企业网站实现各种功能（唯一集成3O多套模版的企业建站系统）奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自 立即学习“前端免费学习笔记（深入）”；✅ 核心 CSS：精准控制显示逻辑
/* 所有子菜单默认隐藏 */
.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，但层级过深会降低可用性，建议谨慎使用。
✅ 最佳实践建议
