纯css多级下拉菜单失效主因是定位上下文缺失、hover选择器层级不全、视觉空隙导致状态丢失、移动端交互模型不匹配及z-index层叠上下文错位；须为每级li设position:relative，写全:hover路径，缝合菜单间隙，用:focus-within兼容键盘，避免transform破坏层叠。
纯 CSS 多级下拉菜单在桌面端能跑通，但只要鼠标移过去就消失、三级点不开、手机上完全没反应——这些问题不是你写错了，而是 hover 机制和定位细节没对齐。
父级必须加 position: relative
子菜单用 position: absolute 却飞到页面左上角？90% 是因为父级 li 没设 position: relative。绝对定位会逐层往上找最近的已定位祖先，找不到就回退到初始包含块（通常是视口），根本不会停在父菜单下面。
-
ul.first-level-menu > li和所有嵌套的li都要显式加position: relative - Flex 布局不会自动创建定位上下文，
display: flex的容器不能替代relative - 别给
body或html加position: relative——这会污染全局定位基准
:hover 选择器必须写全层级
二级能展开、三级不出现？不是 HTML 嵌套错了，是 CSS 选择器漏了一层。:hover 不会穿透多层自动生效，必须明确写出触发路径。
- 正确写法：
.first-level-menu > li:hover > .second-level-menu，再加一层：.second-level-menu > li:hover > .third-level-menu - 错误写法：
ul ul ul—— 它匹配任意三层嵌套，可能误展非目标菜单 - 如果用类名区分，比如
.dropdown-item，就得写成：.dropdown-item:hover > .dropdown-menu，而不是靠兄弟选择器+猜位置
鼠标移过去就闪退：空隙比代码更致命
不是 transition 没配好，是视觉断点让 :hover 状态瞬间丢失。浏览器只要检测到鼠标离开触发元素区域，哪怕只隔 1px，菜单立刻收起。
- 二级菜单用
top: 100%后，给父级li加padding-bottom: 2px或margin-top: -1px把缝隙物理缝合 - 三级菜单右向展开时，用
left: 100%; top: -1px对齐二级项顶部，避免垂直偏移产生新空隙 - 禁用
visibility: hidden替代display: none—— 它仍占布局空间，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 只负责切属性 - 别给
.submenu加pointer-events: none来“隐藏”——链接会全部失活，屏幕阅读器也读不到
最常被忽略的点：z-index 不是堆得越高越好，而是要和父容器的层叠上下文对齐。如果导航栏外层用了 transform（比如折叠动画），它会创建新层叠上下文，此时给子菜单设 z-index: 9999 也没用——得把 z-index 提到同级容器上，或者干脆去掉 transform。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
