二级菜单闪退是因父元素未设position: relative导致子菜单错位，且一级项与二级菜单间存在间隙使hover中断；需同时设置父li为relative、子菜单用top:100%定位并增加底部间距，初始隐藏用display:none而非visibility/opacity。
为什么二级菜单总在鼠标移过去时闪退
这不是浏览器 bug，是定位和间隙共同导致的交互中断。父 li 没设 position: relative，子 .submenu 就会相对于 body 定位，飘到左上角；更常见的是，一级项和二级菜单之间存在 1px 空隙，:hover 状态瞬间丢失。
必须同时满足两个条件：
-
li元素显式声明position: relative（Flex 布局不会自动创建定位上下文） - 子菜单用
top: 100%+left: 0定位，并给父li补 2pxpadding-bottom或margin-bottom消除悬停断点 - 禁用
visibility: hidden或opacity: 0初始隐藏——它们会让鼠标无法进入子菜单热区 - 初始状态必须是
display: none，展开时切为display: block或display: flex
移动端点击后菜单错位或立刻消失怎么办
iOS Safari 和安卓 WebView 对 :hover 的模拟行为不一致：首次点击可能被当 hover 触发，第二次才算 click，造成状态冲突。纯 CSS 无法可靠处理这种多点、长按、软键盘弹出等场景。
正确做法是主动降级：
- 在
@media (hover: none), (pointer: coarse)中，完全禁用所有:hover显隐规则 - 只保留
:focus-within和[data-open="true"]的样式，确保键盘和触屏都能触发 - JS 只做一件事：
el.dataset.open = el.dataset.open === "true" ? "false" : "true"，不操作class，不改display - 子菜单定位别依赖
offsetTop，改用getBoundingClientRect()动态计算，展开前检查底部空间：window.innerHeight - rect.bottom 就向上展开
嵌套三级以上菜单时，第三级显示错乱或被截断
常见现象是第三级菜单出现在视口左侧、顶部，或被父容器的 overflow: hidden 裁剪。这不是选择器写错了，而是层叠上下文和定位源没理清。
关键控制点：
- 每一级
li都必须有position: relative，不能只设第一级 - 二级菜单用
left: 100%实现右向展开（横向多级），三级仍用left: 100%，不要写死left: 200px - 导航外层容器（如
nav或header）禁止设overflow: hidden -
z-index只在最外层nav设一个基础值（如z-index: 100），子菜单靠自然层叠，避免每级都设不同值引发遮盖 - 点击第三级时，事件冒泡常导致第二级关闭，需在子菜单
click处理中加event.stopPropagation()
动画卡顿、跳变、高度过渡不生效
height: 0 → height: auto 无法 CSS 过渡，浏览器无法计算 auto 的数值。用 opacity 或 transform 又没法单独控制菜单区域的高度变化。
稳定方案是统一用 max-height：
- 初始状态：
max-height: 0; overflow: hidden; - 展开状态：
max-height: 500px;（值要大于菜单最大可能高度，但别过大影响性能） - 过渡前强制重排：
getComputedStyle(el).height读一次，再设max-height，否则部分浏览器跳过动画 - 配合
opacity和visibility控制可访问性，但显隐主控必须是max-height
真正难的不是写出能动的菜单，而是让每一级的定位上下文、事件边界、焦点链路和媒体查询降级逻辑全部对齐。DOM 结构稍有偏移（比如 Vue 的 <transition></transition> 插入 wrapper），.toggle:hover + .menu 就直接失效——这时候查 CSS 毫无意义，得先看渲染后的 HTML。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
