根本原因是display属性不可动画且父元素hover区域未覆盖子菜单；须将子菜单嵌入父li、设position:relative/absolute衔接、用opacity+visibility替代display并配transition，确保悬停连续性。
hover 触发下拉菜单时，display: none 切换不生效？
直接用 :hover + display: none / display: block 很容易失效，根本原因是 display 属性不可动画、且父元素若设了 overflow: hidden 或高度塌陷，子菜单会被裁掉或压根不显示。
常见错误现象：ul 下拉项完全没出现，或者只闪一下就消失——多半是 hover 目标错绑在了 li 上，而鼠标移向子菜单时脱离了触发区域。
- hover 必须绑定在父级容器（如
nav或外层li），而非仅作用于触发按钮 - 子菜单
ul初始必须设display: none，且父li要设position: relative，否则position: absolute的下拉项会脱标偏移 - 避免给父容器设
overflow: hidden，否则absolute子项会被截断
为什么不能只靠 display 控制显隐？
display 切换是硬切换：从 DOM 渲染流中彻底移除/插入，导致无法过渡动画，且会触发重排（reflow），频繁 hover 可能卡顿。更重要的是，display: none 元素内的 :hover 完全无效，所以鼠标一旦离开触发区，菜单立刻消失，来不及移到子项上。
真正可用的组合是：visibility: hidden + opacity: 0 + pointer-events: none 配合 transition，但前提是结构要支持“悬停连续性”。
立即学习“前端免费学习笔记（深入）”；
- 把触发和下拉内容包在同一个父
li内，确保鼠标经过子ul时不中断 hover 状态 - 用
opacity和visibility替代display，才能加transition: opacity .2s - 必须设
pointer-events: none初始态，否则透明但可点的菜单会拦截鼠标事件
HTML 结构必须满足 hover 连续性
失败的结构常把按钮和下拉菜单放在不同兄弟节点里，比如 button 和 ul 并列；正确结构是下拉菜单作为触发项的直接子元素，中间不能有空隙或非定位元素打断 hover 流。
<nav>
<ul>
<li class="dropdown">
<a href="#">产品</a>
<ul class="dropdown-menu">
<li><a href="#">Web</a></li>
<li><a href="#">Mobile</a></li>
</ul>
</li>
</ul>
</nav>
-
dropdown的li必须设position: relative -
dropdown-menu设position: absolute; top: 100%; left: 0;，并用margin-top微调间距，避免 hover 移入时出现缝隙 - 不要用
float布局导航项，它会导致父容器高度塌陷，影响绝对定位参考
移动端 touch 设备下 hover 不工作怎么办？
纯 :hover 在 iOS Safari 和安卓 Chrome 上对触摸屏基本无效——第一次 tap 触发 hover，第二次才跳转，体验断裂。这不是 bug，是规范行为。
解决思路不是强行模拟 hover，而是降级为 click 触发，或用 JavaScript 补充状态管理：
- 给
.dropdown添加touchstart事件监听，动态添加active类，CSS 用.dropdown.active .dropdown-menu { display: block; } - 避免同时监听
hover和click，否则桌面端会双触发；可用matchMedia('(hover: hover)')检测设备能力再加载对应逻辑 - 如果只做桌面端，明确声明
@media (hover: hover) { ... }，避免 CSS 被移动设备误解析
hover 下拉看着简单，实际卡点都在 DOM 结构连续性、定位上下文和设备兼容性上。display 切换只是表象，关键是谁在 hover、谁被显示、以及鼠标能不能自然滑进去——漏掉任意一环，菜单就消失。
