怎样用CSS实现多级联动菜单的样式？

纯CSS多级联动菜单失效的根源在于定位上下文缺失、hover选择器链断裂及交互通道未覆盖。必须为每级li设position:relative，hover选择器需完整嵌套，用padding/margin消除悬停空隙，并同时支持:hover和:focus-within以兼顾鼠标与键盘用户。

纯 CSS 多级联动菜单能跑通，但只要二级不显、三级闪退、手机点不开——问题几乎都出在定位上下文或选择器链上，不是写法“不高级”，而是几个关键约束没对齐。

父级 li 必须加 position: relative

子菜单用 position: absolute 却飞到页面左上角？90% 是因为它的直接父级 li 没设 position: relative。绝对定位会逐层往上找最近的已定位祖先，找不到就回退到视口，根本不会停在你期望的位置。

• 所有可能展开子菜单的 li（包括一级、二级、三级）都要显式加 position: relative
• display: flex 的容器不会自动创建定位上下文，不能替代 relative
• 别给 body 或 html 加 position: relative——这会污染全局定位基准

:hover 选择器必须写全层级，不能跳步

CSS 的 :hover 不会穿透多层 DOM 自动维持状态。它只响应鼠标直接悬停的元素，且仅对连续嵌套的后代生效。漏一层，下一级就卡死。

• 二级菜单：用 .first-level > li:hover > .second-level
• 三级菜单：必须补全中间层，写成 .second-level > li:hover > .third-level
• 禁止写 .menu li:hover ul ul —— 它匹配所有三层嵌套，容易误展非目标菜单
• 如果 HTML 中用 class="has-sub" 标记可展开项，优先用 .has-sub:hover > .submenu，比泛用 li:hover 更精准

鼠标移向子菜单时闪退，本质是物理空隙

这不是动画延迟没配好，而是鼠标经过一级 li 和二级 ul 之间那 1–2px 的空白区域时，:hover 状态瞬间丢失，导致菜单立即收起。

立即学习“前端免费学习笔记（深入）”；

• 最稳方案：给一级 li 加 padding-bottom: 12px，再用 margin-bottom: -12px 抵消布局影响，把悬停热区向下延伸覆盖空隙
• 三级菜单右向展开时，用 left: 100% + top: -1px 对齐二级项顶部，避免垂直偏移产生新空隙
• 子菜单统一设 min-width: 100%，防止内容窄导致鼠标滑出触发区
• 别依赖 transition-delay 隐藏——它只延迟动画开始时间，不延长 :hover 生效周期

移动端和键盘用户根本看不到 :hover 菜单

iOS/Android 上点击一次是模拟 hover，第二次才跳链接；键盘用户按 Tab 进入一级菜单项，焦点直接跳走，二级内容永远不会出现。这不是兼容性问题，是交互模型不匹配。

• 必须同时写：.dropdown:hover .submenu 和 .dropdown:focus-within .submenu
• 每一级 li 都要支持 :focus-within，否则键盘用户无法展开下级
• 移动端不要用 @media (hover: none) 删掉 hover 样式，而是降级为 click 控制：用 data-open="true" + CSS 属性选择器，JS 只负责切属性
• 别用 visibility: hidden 或 opacity: 0 替代 display: none 初始隐藏——前者仍占交互区域，hover 后可能引发跳动或宽度塌缩

真正难的不是写出三级选择器，而是让每一级的定位上下文、悬停热区、交互通道都严丝合缝。浏览器不会替你“猜意图”，它只认结构和规则。