纯css多级下拉菜单失效主因是dom结构与aria语义缺陷：三级hover易中断、绝对定位导致错位、aria-haspopup值错误、键盘导航缺失及移动端无hover支持。
纯 CSS 实现多级下拉菜单，关键不在“嵌套多深”，而在结构是否可预测、CSS 选择器能否精准命中目标子菜单。用 ul 嵌套本身不难，但一加到三级就错位、悬停失效、键盘不可用——问题几乎全出在 DOM 关系和 ARIA 语义上。
为什么 ul 嵌套 + :hover 在三级时大概率失效
浏览器对 :hover 的冒泡和作用域有隐式限制：父 li:hover 可以触发子 ul 显示，但子 ul 内部再套一层 li:hover 时，若该 li 没有足够宽的点击热区（比如只包文字、无 padding），悬停极易中断；更严重的是，当二级 ul 使用 position: absolute 定位后，它可能脱离文档流，导致其内部 li 的 :hover 区域与鼠标实际位置错开。
实操建议：
- 二级
ul必须作为一级li的**直接子元素**，不能靠 JS 插入或绝对定位“飞”出去 - 三级
ul同理，必须是二级li的直接子元素，且需加left: 100%+top: 0实现右向展开，而非靠margin-left - 每个可展开项的
li必须设position: relative，否则子ul的absolute会相对于最近的position祖先定位，造成偏移 - 避免给
ul设display: none后再用:hover切换 —— 这会让屏幕阅读器完全忽略该节点；改用visibility: hidden+aria-hidden="true"
aria-haspopup 必须是 "menu"，不是 "true"
设成 aria-haspopup="true" 是常见错误，W3C ARIA 1.1 已废弃该值。NVDA + Firefox 组合下，读屏器会读作“按钮，有弹出”，但不说明类型，用户无法预判这是菜单还是对话框；JAWS 甚至可能跳过整个子菜单的焦点流。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
- 一级触发项（如
li > a或button）加aria-haspopup="menu"和aria-expanded="false" - 对应子菜单容器（
ul）加role="menu"和aria-labelledby，值为触发元素的id - 禁用菜单项加
aria-disabled="true"，并确保tabindex="-1"且不响应键盘事件 - 不要同时给同一个元素设
aria-haspopup和aria-controls—— 二者语义冲突，aria-controls适用于region类型内容（如折叠面板），不适用于菜单
键盘导航必须手写，浏览器不会自动处理
只靠 CSS :hover 的菜单，键盘用户按 Tab 进入一级菜单后，按 → 无法进入二级，按 ↓ 也无法在当前级循环聚焦 —— 因为浏览器根本不知道这些 a 或 li 构成一个逻辑菜单。
实操建议：
- 每个菜单项用
role="menuitem"，非菜单项（如分隔线）用role="separator" - 监听
keydown，对ArrowDown/ArrowUp在当前role="menu"内循环聚焦第一个/最后一个menuitem - 按
ArrowRight时，先检查当前menuitem是否有aria-haspopup="menu"，有则展开其子菜单，并.focus()到子菜单第一个menuitem - 展开子菜单时，必须调用
event.preventDefault()，否则页面可能滚动或触发表单提交
最易被忽略的一点：移动端没有 :hover，所以纯 CSS 的多级菜单在手机上默认不可用。如果业务必须支持触摸设备，要么改用 click 触发（加 touchstart 兼容），要么直接降级为单层 —— 别试图用 @media (hover: hover) 检测再启用 hover，iOS Safari 对该媒体查询支持极不稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
