纯CSS响应式多级菜单需桌面端用:hover+:focus-within、移动端禁用:hover改用data-open或:focus-within；二级菜单不显示主因是父li缺position:relative且子菜单误用visibility/opacity隐藏而非display:none。
纯 CSS 实现响应式多级菜单在桌面端可行，但移动端必须放弃 :hover，改用 click + data- 属性或 :focus-within 配合 tabindex；否则 iOS Safari 和安卓 WebView 上基本不可用。
为什么二级菜单死活不显示
不是选择器写错了，而是两个硬性条件没满足：position: relative 缺失、display 切换方式错误。
- 父级
<li>必须显式设position: relative，否则.submenu会相对于body定位，直接飘到左上角 - 子菜单初始状态必须是
display: none，不能用visibility: hidden或opacity: 0模拟隐藏——前者让鼠标无法触发:hover，后者没有交互区域 - 如果用了
float: left布局一级导航，z-index会失效；换成display: flex并确保父容器有position: relative
鼠标一移就闪退？这不是 bug 是布局漏洞
根本原因是父项和子菜单之间存在像素级空隙，导致 :hover 状态中断。CSS 没法加 hover 延迟，只能物理缝合。
- 子菜单用
top: 100%定位，别用top: auto或margin-top，避免留白 - 给父项的
:hover同时作用于自身和子菜单：.nav-item:hover .submenu, .submenu:hover，但注意这会影响键盘焦点逻辑 - 如果结构是
<li class="has-sub">Item<ul></ul> </li>，选择器必须写成.has-sub:hover > ul，而不是宽泛的li:hover ul
移动端点击展开后子菜单错位或瞬间消失
这不是 JS 绑定失败，而是浏览器对 :hover 的模拟行为混乱：iOS Safari 可能将第一次点击当 hover 触发，第二次才算 click，造成状态覆盖。
立即学习“前端免费学习笔记（深入）”；
- 彻底弃用
:hover控制显隐，改用 JS 显式切换classList.toggle("is-open")或操作dataset.open - 子菜单定位别依赖
offsetTop——视口缩放、软键盘弹出会破坏计算；改用position: fixed+getBoundingClientRect()动态算位置 - 展开前检查底部空间：
window.innerHeight - rect.bottom 就向上展开，避免被裁剪 - 嵌套超过两级时，事件冒泡常导致点开第三级的同时关闭第二级；给
event.stopPropagation()加在子菜单的click处理里
动画卡顿、跳变、不平滑
height: 0 → auto 无法过渡，浏览器不知道 auto 是多少；opacity 或 transform 又没法单独控制子菜单区域高度。
- 统一用
max-height过渡：初始max-height: 0，展开时设为足够大的值（如max-height: 500px），再配opacity或visibility - 过渡开始前强制重排：
getComputedStyle(el).height读一次，再设max-height，否则浏览器可能跳过重排步骤 - 不要对
body或html设z-index——会创建新层叠上下文，导致子菜单z-index失效
最易被忽略的一点：所有可展开项必须加 role="button"，子菜单容器加 tabindex="-1"，并同步更新 aria-expanded 和 aria-hidden——否则屏幕阅读器完全读不出当前状态，键盘用户也无法操作。
