纯CSS :hover二级下拉菜单必须满足三条件：父级li设position: relative、子菜单用display: none/block切换、:hover选择器链完整嵌套；否则二级不显、三级消失。
纯 CSS 的 :hover 二级下拉菜单能做平滑，但必须满足三个硬性条件：父级显式设 position: relative、子菜单用 display: none/block 切换、:hover 选择器链完整嵌套。缺一不可，否则菜单不显示或闪退。
为什么二级菜单根本不出现在页面上？
最常见原因是子菜单的定位上下文丢失——它的直接父级 li 没加 position: relative。结果子菜单按默认文档流定位，跑到页面左上角甚至视口外，肉眼看不见。
- 检查 HTML 中每个可展开的菜单项（比如带子菜单的
li），必须有position: relative - 子菜单（通常是嵌套的
ul）必须设position: absolute+top: 100%，不能依赖float或flex推位置 - 别用
visibility: hidden或opacity: 0隐藏子菜单——它们会让鼠标无法“触达”，:hover状态立刻中断 - 子菜单初始状态必须是
display: none，hover 时切为display: block（或grid/flex）
如何写出不丢级、不误触发的 :hover 选择器链？
浏览器不会自动维持跨层级的 hover 状态，你得把每一层的触发关系写死。选错一个层级，二级就卡住，三级直接消失。
- 二级菜单：用
.main-menu > li:hover > .submenu，不能简写成.main-menu li:hover .submenu（后者会匹配所有后代，造成悬停污染） - 如果 HTML 是
<li class="has-sub">Item<ul class="submenu"></ul></li>，选择器应为.has-sub:hover > .submenu，不是li:hover ul - 避免宽泛选择器如
.menu li:hover ul，它可能意外激活非目标子菜单 - 移动端无 hover，这个选择器链在触控设备上天然失效，需后续用 JS 补交互
鼠标一移向子菜单就闪退？物理缝合触发区域
这不是动画问题，是 DOM 间存在像素级空隙，导致 :hover 状态中断。CSS 没有可靠的 delay，只能靠“填缝”解决。
立即学习“前端免费学习笔记（深入）”；
- 让子菜单
top: 100%后，给父级li加padding-bottom: 2px或margin-bottom: -1px，把空隙盖住 - 子菜单统一设
min-width: 100%，防止内容窄导致鼠标滑出触发区 - 如果子菜单有左右偏移（比如
left: 0改成left: 50%），要同步调整父级padding或加transform: translateX()对齐 - 别依赖
transition: opacity来“掩盖”闪退——它治标不治本，且键盘用户完全不可访问
加 transition 动画反而更卡？过渡必须写在正常态
很多人把 transition 写在 :hover 块里，结果第一次悬停没动画、第二次才生效。真正起效的写法是：动画属性定义在正常态，只改触发时的终值。
- 子菜单本身不加
transition，而是在.submenu正常态写：transition: opacity 0.2s ease, transform 0.2s ease - hover 时改
opacity: 1和transform: translateY(0)，初始设opacity: 0; transform: translateY(-8px) - 慎用
height过渡——height: 0 → auto不支持动画，得用max-height模拟，但有高度上限风险 - 加
will-change: transform可选，对某些浏览器（尤其是旧版 Safari）能减少重绘卡顿
真正难的不是让菜单“动起来”，而是让 hover 状态在父子元素之间稳定传递——这取决于 DOM 结构是否连续、CSS 定位是否形成封闭触发区、以及选择器是否精确到每一层。稍有松动，用户鼠标一挪就断连，体验直接归零。
