hover子菜单不显示的主因是display未显式切换，需在父级:hover后代选择器中设display:block；position:absolute须配父级relative；多级菜单需完整:hover链；移动端:hover不可靠，须用JS或checkbox方案并补无障碍支持。
hover触发的子菜单不显示，检查层级和display属性
最常见的情况是子菜单用了 display: none，但父级 :hover 选中后没正确切换成 display: block（或 flex、grid）。CSS里没有“继承display”的概念，子元素不会因为父级hover就自动显示——必须显式写出来。
关键点：
- 子菜单默认要设
display: none，不能依赖父级隐藏（比如靠visibility: hidden或opacity: 0） - 触发规则必须写在父级
:hover的后代选择器里，例如.nav > li:hover > ul，而不是只写ul - 如果用了
position: absolute，得确认父级li有position: relative，否则下拉位置会飘走
二级以上菜单需要嵌套:hover链，别漏掉中间层级
三级菜单不是靠一个 :hover 就能展开的。浏览器只响应直接触发元素的伪类，所以 .menu > li:hover > ul > li:hover > ul 这种链式写法必须完整，少一环，第三级就卡死。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 写成
.menu li:hover ul—— 这会匹配所有后代ul，导致鼠标移开一级时三级还挂着 - 忘了给二级
li加position: relative，结果三级菜单相对于顶层定位，错位严重 - 用
transition时只加在ul上，但display不支持过渡，得换用max-height+overflow: hidden或opacity+visibility
移动端失效？:hover在触摸设备上基本不可靠
iOS 和 Android 的主流浏览器对 :hover 的支持非常有限：通常只在模拟悬停（比如长按）时触发一次，且不维持状态。纯CSS下拉菜单在手机上大概率点不开、点开了关不掉。
现实方案只有两个：
- 用媒体查询隔离：桌面端用
:hover，移动端改用input[type="checkbox"]+:checked模拟开关（需配合label和隐藏复选框） - 直接放弃纯CSS，用少量JS监听
click切换aria-expanded和 class，兼顾可访问性和可靠性 - 别强行“纯CSS”——很多所谓“响应式纯CSS菜单”在真机上连二级都展不开，测试务必用 Safari iOS 实机点一点
键盘焦点和可访问性几乎为零，别假装它能被屏幕阅读器理解
:hover 是鼠标行为，跟键盘 Tab、屏幕阅读器的焦点流完全无关。用户按 Tab 进入一级菜单项，焦点会直接跳到下一个可聚焦元素，二级菜单根本不会出现，更别说读出内容。
如果项目有无障碍要求（比如政府、教育类站点），必须补这些：
- 用
aria-haspopup="true"和aria-expanded="false"标记触发项 - 用 JS 监听
keydown（如ArrowDown）手动展开，并管理焦点顺序 - 纯CSS方案在 WCAG 2.1 里属于「不满足 A 级」，审计时会被标红
真正上线前，拔掉鼠标，只用键盘跑一遍导航流程——这时候才会发现，那个“完美hover动画”的菜单，根本没法用。
