hover下拉菜单鼠标移入空隙即消失，根本原因是触发元素与子菜单间存在视觉空隙导致:hover中断；必须用position: absolute紧贴父项、确保直接后代结构、正确使用后代选择器、兼顾focus-within和可访问性。
hover触发的下拉菜单为什么鼠标一移就消失
根本原因是子菜单和触发元素之间存在视觉空隙，:hover 状态在移入空隙时中断，导致display: none立刻生效。这不是浏览器bug，是CSS层叠和事件流的正常表现。
- 必须用
position: absolute让子菜单紧贴父项底部，不留缝隙 - 父容器（通常是
<li>）需设position: relative，否则absolute会相对于body定位 - 如果父项有
padding-bottom或子菜单有top偏移过大，都会制造可“掉进去”的空白区 - 移动端无效：
:hover在iOS/Android上无可靠支持，别指望它能点开
纯CSS下拉菜单的HTML结构必须怎么写
结构错一点，:hover就找不到目标。核心约束只有一条：子菜单必须是触发元素的**直接后代**，且不能被其他块级元素隔断。
- 正确：
<li class="dropdown"> <a>菜单</a><ul class="submenu">...</ul> </li> - 错误：
<li> <div><a>菜单</a></div> <ul>...</ul> </li>（<div>阻断了<code>a:hover到ul的层级关系） - 触发元素推荐用
<a></a>而非<div>——语义正确，且天然支持键盘<code>Tab聚焦 - 子菜单
<ul></ul>初始状态必须是display: none，不能靠visibility: hidden或opacity: 0替代（后者仍占布局空间，影响hover区域） - 写法必须是：
.dropdown:hover .submenu { display: block; }（注意中间空格，表示后代选择器） - 禁用
.dropdown:hover > .submenu（子选择器），除非你确定.submenu是.dropdown的**直接子元素** - 不要给
.submenu加transition: opacity——display无法过渡，会导致闪现或卡顿；如需淡入，改用opacity+visibility组合，并配pointer-events: none防悬停穿透 - IE11及以下不支持
display: grid做下拉容器，老项目请坚持用block/flex - 确保
<a></a>有tabindex="0"，且.submenu初始aria-hidden="true" - 用
:focus-within模拟键盘展开：.dropdown:focus-within .submenu { display: block; }（Chrome 67+/Firefox 61+支持） - 禁用
outline: none——移除焦点环等于宣判键盘用户失明 - 别忘了
Esc关闭逻辑只能靠JS，CSS做不到
如何用CSS精准控制显示/隐藏逻辑
关键不是写对:hover，而是写对选择器路径。常见失效都是因为选择器没命中。
键盘导航和可访问性怎么补救
纯:hover菜单对键盘用户完全不可用。如果项目要过WCAG，必须加JS兜底，但CSS层能做的最少两件事是：
立即学习“前端免费学习笔记（深入）”；
hover下拉看着简单，但空隙、结构、选择器、可访问性四点全踩中才算真正可用。漏掉任意一个，用户就会在移鼠标时反复“掉链子”。
