子菜单闪退主因是触发元素与菜单间存在空白间隙导致hover丢失，应将其包裹于共同父容器并用position: relative/absolute衔接；移动端需避免依赖:hover，改用JS切换类配合opacity/transform动画；IE11中:hover仅支持标签，需用JS模拟或确保触发元素为且父容器触发hasLayout。
hover显示菜单时子菜单闪退怎么办
根本原因是鼠标从触发元素移动到菜单途中经过了空白间隙，导致 :hover 状态丢失。这不是 CSS 有 bug，而是 DOM 结构没连上。
- 把触发元素（比如
.nav-item）和下拉菜单（.dropdown-menu）用共同父容器包住，确保悬停区域连续 - 父容器加
position: relative，子菜单用position: absolute贴着它定位，避免脱离文档流造成空隙 - 别用
margin-top拉开菜单——这会制造不可 hover 的空白；改用top+transform微调位置
纯CSS下拉菜单在移动端点不开了
CSS :hover 在触摸设备上行为不一致：iOS Safari 和部分安卓浏览器只在首次点击时触发一次 :hover，之后失效；Android Chrome 则可能完全不响应。
- 不要依赖
:hover做核心导航交互，尤其当菜单含重要链接时 - 如果必须用纯 CSS，给触发元素加
touch-action: manipulation，并确保它可聚焦（比如是<button>或带tabindex的<div>） - 更稳妥的做法是用 JS 监听
click并切换.is-open类，CSS 只负责视觉状态：.dropdown.is-open .dropdown-menu { opacity: 1; visibility: visible; }
transition动画卡顿或闪一下再出现
常见于对 display 或 visibility 做过渡——这两个属性本身不支持动画，transition 会失效，浏览器只能硬切，造成闪烁或跳变。
- 只对支持过渡的属性做动画：
opacity、transform、max-height（注意设合理上限值，比如max-height: 500px） - 隐藏时用
opacity: 0; transform: translateY(-10px);，显示时恢复；配合transition: opacity 0.2s ease, transform 0.2s ease - 别忘了加
will-change: opacity, transform提前提示浏览器优化渲染层
IE11里:hover菜单不生效或错位
IE11 对 :hover 的支持仅限于 <a> 标签，默认不支持其他元素（如 <div>、<li>）。即使加了 tabindex，定位也常因 hasLayout 问题偏移。
立即学习“前端免费学习笔记（深入）”；
- 触发元素必须是
<a>，或者用 JS 绑定mouseenter/mouseleave模拟 - 绝对定位菜单时，父容器要触发 hasLayout：加
zoom: 1或overflow: hidden - 避免用
flex布局控制下拉方向——IE11 的 flex 子项align-self行为异常，改用text-align+left/right配合position
:hover，而是想清楚这个菜单在 iPad 上第一次点、在 IE11 里第二次悬停、在低端安卓机上连点两下时，到底发生了什么。 
