用 visibility + opacity 替代 display 实现平滑过渡，确保父容器设 position: relative 以建立堆叠上下文并消除 hover 空隙，移动端需 JS 控制类名切换。
display: none 切换时菜单闪一下，怎么稳住
本质是 display 切换会触发重排（reflow），浏览器来不及渲染过渡帧，尤其在快速移入移出时。用 visibility + opacity 替代更稳妥，但前提是菜单区域不能占位干扰布局 —— 所以得配合 position: absolute 和父容器 position: relative。
- 父级必须加
position: relative，否则absolute子菜单会脱离上下文乱飘 - 子菜单初始设
visibility: hidden; opacity: 0; transition: opacity 0.2s，hover 时只改visibility: visible; opacity: 1 - 别用
display: none/block做过渡起点/终点，CSS 过渡对display完全无效
:hover 作用域错位，鼠标一移就收起来
常见于菜单项和下拉层之间有空隙，CSS 认为“离开触发元素”了。不是 hover 写错了，是 DOM 结构或盒模型留了缝。
- 确保下拉菜单的
top值紧贴触发项底部，比如top: 100%，而不是top: 40px这类固定值 - 检查触发项（如
.nav-item）和下拉层（如.dropdown-menu）之间是否被 margin/padding/line-height 撑开间隙 - 极端情况可加透明“连接条”：给父容器伪元素
::after设content: ""; position: absolute; top: 100%; height: 10px; width: 100%;，扩大 hover 热区
移动端 touch 设备上 hover 不生效
:hover 在 iOS 和部分安卓浏览器中仅对可点击元素（<a>、<button>）模拟一次，且无悬停态保持能力。纯 CSS 下拉菜单在手机上基本不可靠。
- 真要兼容移动端，必须加 JS 控制类名切换，比如监听
click或touchstart，切换.is-open - 若坚持纯 CSS，至少把触发标签改成
<button>或带role="button"的<div>，并加tabindex="0" - 别依赖
@media (hover: hover)做判断 —— 它只反映设备“能力”，不反映当前交互方式；手指点一下后，hover 态仍会消失
下拉菜单遮不住后面的内容（z-index 失效）
不是 z-index 数值不够大，而是堆叠上下文（stacking context）断了。父容器没创建新上下文，子元素的 z-index 再高也只在自己层内比较。
立即学习“前端免费学习笔记（深入）”；
- 给菜单直接父级（比如
.nav-item）加position: relative; z-index: 10，让它成为独立堆叠上下文 - 下拉菜单自身设
position: absolute; z-index: 1就够了，不用写 9999 - 检查有没有祖先元素用了
transform、filter、will-change—— 这些也会隐式创建堆叠上下文，可能把菜单压在下面
