:hover 实现下拉菜单仅适用于菜单为触发元素的后代或相邻兄弟元素的纯 css 场景；因 css 选择器无向上或跨层级匹配能力，一旦菜单 dom 位置分离（如 portal 渲染）或需支持触摸设备，必须改用 javascript 控制。
直接用 :hover 实现下拉菜单，只适用于纯 CSS 场景且菜单必须是触发元素的后代或相邻兄弟元素；一旦结构不满足（比如菜单在 DOM 中远离触发项），:hover 就会失效——这不是写法问题，是 CSS 选择器能力边界决定的。
为什么 :hover 只能选中后代或相邻兄弟？
CSS 没有“向上找父级”或“跨任意位置选中”的能力。伪类 :hover 的作用范围严格受限于选择器语法：
-
.trigger:hover .dropdown：仅当.dropdown是.trigger的**后代**（嵌套在内部）才生效 -
.trigger:hover + .dropdown：仅当.dropdown是.trigger的**紧邻下一个兄弟元素**才生效 -
.trigger:hover ~ .dropdown：可匹配后续任意兄弟，但依然要求两者同级且共父容器 - 如果
.dropdown在另一个div里、或在 body 底部、或被 React/Vue 动态挂载到 portal 节点中——:hover完全无法触达
:hover 下拉菜单的最小可行 HTML 结构
必须保证触发元素和菜单在 DOM 中存在明确的层级/位置关系。常见可靠结构只有两种：
<!-- 方式一：后代结构（最常用） -->
<nav class="menu"><button class="trigger">产品</button>
<div class="dropdown">
<a href="#">Web</a>
<a href="#">Mobile</a>
</div>
</nav><p><!-- 方式二：相邻兄弟结构（需注意 display: block） -->
<button class="trigger">服务</button>
</p><div class="dropdown">
<a href="#">咨询</a>
<a href="#">实施</a>
</div>
对应 CSS 必须显式隐藏菜单，并用 :hover 切换 display 或 visibility：
.dropdown {
display: none; /* 不能用 visibility: hidden，否则 hover 无法持续触发 */
}
.trigger:hover .dropdown,
.trigger:hover + .dropdown {
display: block;
}
容易踩的三个坑
即使结构正确，也常因细节导致菜单闪退或无法显示：
-
菜单和触发元素之间有空隙：鼠标移出触发元素后、进入菜单前存在空白 gap，
:hover状态中断，菜单立刻消失。解决方法是给.trigger加padding-bottom或给.dropdown加margin-top: -1px补齐间隙 -
用了
visibility: hidden或opacity: 0：这两个属性不改变元素布局占位，但鼠标无法悬停其上；一旦 hover 离开触发器，状态丢失，菜单无法保持显示。必须用display: none/block或配合pointer-events: none控制交互区域 -
移动端无效：iOS 和 Android 上
:hover仅在模拟桌面模式时部分生效，真机点击不会触发。需要 JavaScript 监听click或touchstart才能可靠展开
真正棘手的不是怎么写 :hover，而是判断它是否适合你的场景——只要菜单结构不固定、或要支持触摸设备、或用了组件库的 portal 渲染，就得切到 JS 控制。CSS :hover 是个便利开关，不是通用解决方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
