纯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 后可能引发跳动或宽度塌缩
真正难的不是写出三级选择器，而是让每一级的定位上下文、悬停热区、交互通道都严丝合缝。浏览器不会替你“猜意图”，它只认结构和规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
