本文详解 css 多级下拉菜单中“鼠标移入子菜单时父菜单失焦导致子菜单消失”的核心问题，通过合理利用 :hover 作用域与 dom 结构嵌套关系，无需 javascript 即可实现稳定、可扩展的多层导航交互。
造成子菜单（如 .sub-1）瞬间消失的根本原因在于：当前 CSS 规则仅在 .dropdown:hover .dropdown-content 时显示一级菜单，而 .sub-1 是
元素，并非 的直接兄弟或后代触发器，且其自身未被纳入任何 :hover 持续显示逻辑中。当鼠标离开 移向 .sub-1 时，.dropdown 不再处于 hover 状态，.dropdown-content 隐藏 → 连带其内部所有内容（包括 .sub-1）一并消失。
✅ 正确解法是：将子菜单的显示逻辑绑定到其「容器」或「自身」的 hover 状态上，并确保父子容器在视觉上无缝衔接（无间隙）。
✅ 推荐结构与 CSS 修改方案
首先，优化 HTML 结构，使每级子菜单都包裹在具备 hover 能力的容器内（推荐使用
或 包裹链接 + 子菜单）：
对应关键 CSS（精简可复用版）：
/* 一级菜单：悬停整个 dropdown 容器时显示 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 二级菜单：悬停其父容器（.menu-item）或自身（.sub-1）时显示 */
.menu-item:hover .sub-1,
.sub-1:hover {
display: block;
}
/* 【重要】消除悬停断点：确保 .menu-item 与 .sub-1 之间无垂直/水平间隙 */
.menu-item {
position: relative;
}
.sub-1 {
display: none;
position: absolute;
top: 100%; /* 紧贴父项底部 */
left: 0;
min-width: 160px;
background-color: #f9f9f9;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-top: 0; /* 禁止额外间距 */
}
/* 子菜单内链接样式（保持原有） */
.sub-1 a {
display: block;
padding: 12px 16px;
color: #0f4391;
text-decoration: none;
white-space: nowrap;
}
/* 可选：添加过渡提升体验（非必需但推荐） */
.dropdown-content,
.sub-1 {
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.dropdown-content,
.sub-1 {
opacity: 1;
visibility: visible;
}
.dropdown:not(:hover) .dropdown-content,
.menu-item:not(:hover) .sub-1,
.sub-1:not(:hover) {
opacity: 0;
visibility: hidden;
}⚠️ 关键注意事项
- 结构决定逻辑：CSS :hover 只能影响后代或相邻元素，无法跨不相关节点触发。因此 .sub-1 必须是 .menu-item 的直接子元素，且 .menu-item 必须可被 hover（不能是 自身，因 内无法嵌套块级 .sub-1）。
- 零间隙设计：.sub-1 的 top: 100% 和 margin-top: 0 确保鼠标从 .menu-item 底部移入 .sub-1 顶部时，始终处于某个 hover 区域内，避免“悬停中断”。
- 层级与 z-index：多级菜单需逐级提升 z-index（如 .sub-1: z-index: 1000; .sub-2: z-index: 1001），防止被遮挡。
- 无障碍提示：生产环境建议补充 aria-haspopup / aria-expanded 属性及键盘导航支持（Tab + Enter + Arrow Keys），本文聚焦纯 CSS 方案。
✅ 总结：解决子菜单闪退 = 结构嵌套合理 + hover 作用域延续 + 视觉无缝衔接。抛弃“依赖 nth-child + + 选择器”的脆弱写法，改用语义化容器（.menu-item）承载交互逻辑，即可稳健支持任意深度的下拉菜单。
