下拉菜单 hover 闪退主因是 display: none 切换导致渲染流中断，应改用 visibility: hidden + opacity: 0 + pointer-events: none 组合并留安全间隙；移动端需 JS 替代 :hover。
下拉菜单 hover 闪退，定位一动就消失
根本原因是 display: none 切换导致元素瞬间消失，鼠标来不及移入子菜单。浏览器渲染时，父级 :hover 状态在子菜单还没完全出现前就已失效。
- 别用
display: none控制显隐——它会彻底移除元素的渲染流，造成定位“断连” - 改用
visibility: hidden+opacity: 0+pointer-events: none组合，保留布局占位和事件响应链 - 父子容器之间必须留出“安全间隙”，比如给
.dropdown和.dropdown-menu垂直方向重叠 8px，或加margin-top: -4px - 若用绝对定位，确保父容器
position: relative已生效，且没被其他transform或will-change干扰堆叠上下文
transition 无效：opacity 变了但菜单不淡入
CSS 过渡要生效，目标属性必须是“可动画的”，且初始/结束状态都得明确声明。只写 opacity: 0 不够，还得有 transition: opacity 0.2s ease，且不能被更高级别的 !important 或层叠规则覆盖。
-
opacity必须配合visibility使用：仅靠opacity过渡，元素仍响应鼠标事件，容易误触 - 过渡属性要写在「稳定态」选择器上，比如
.dropdown-menu，而不是只写在.dropdown-menu:hover - 避免对
height或max-height做过渡——它们无法从0平滑过渡到自动高度；真要动高度，得预设固定值或用 JS 测量 - 如果用了
transform: scaleY(0)，记得同时设transform-origin: top，否则缩放中心偏移会导致错位
移动端点击展开后无法关闭，或者点空白处不收起
纯 CSS 的 :hover 在触摸设备上不可靠，iOS Safari 默认会延迟触发，且没有“失焦”概念。必须引入轻量 JS 来接管交互逻辑。
- 监听
click而非touchstart，避免 iOS 300ms 延迟干扰体验 - 用
event.target.closest('.dropdown')判断点击是否落在下拉区域外，再调用classList.remove('active') - 别在 document 上直接绑
click后无条件收起——这会和内部表单控件（如<select></select>、<input>）冲突，应排除.dropdown-menu * - 为保无障碍支持，记得同步控制
aria-expanded属性，比如点击按钮时切button.setAttribute('aria-expanded', 'true')
z-index 显示错乱：菜单被其他组件盖住
不是 z-index 数值不够大，而是堆叠上下文（stacking context）被意外创建。一个 transform、opacity 或 <code>filter 都可能让父容器变成新的堆叠上下文根节点，把子菜单锁死在里面。
立即学习“前端免费学习笔记（深入）”；
- 检查父级是否有
transform: translateZ(0)、will-change: transform等隐式创建上下文的样式 - 菜单的
z-index必须比其最近的「非 static 定位祖先」高，而不是全局最高——先用浏览器开发者工具看 computed z-index 和 stacking context 树 - 避免全局写
* { z-index: 1 }，这种通配符会污染所有元素的堆叠层级 - 如果用框架（如 React），注意 Portal 渲染的菜单是否脱离了原有 DOM 上下文，此时需单独管理其 z-index 体系
事情说清了就结束。最常被忽略的是：hover 闪退问题本质是渲染时序+布局中断，不是样式没写对；而移动端行为不一致，往往不是 JS 写错了，是没意识到 :hover 在 touch 设备上的语义已经失效。
