Safari中纯CSS下拉菜单未悬停导航时意外弹出问题咨询

这个是WebKit内核（Safari桌面端全版本常见）的已知hover命中判定bug，不是代码逻辑问题，核心是隐藏状态的下拉层透明区域仍会被浏览器错误计入父级导航元素的hover命中范围，才会出现光标离开导航栏后划过空白区域菜单自动弹出的问题。

最小改动修复方案 #

直接给隐藏状态的下拉菜单禁用鼠标事件响应，展开时再恢复即可，不需要改现有交互逻辑，兼容所有主流浏览器：

/* 下拉菜单默认隐藏状态 */
.nav .dropdown-menu {
  opacity: 0;
  visibility: hidden;
  /* 核心修复：隐藏时不响应任何鼠标事件，阻断空白区域的命中判定 */
  pointer-events: none;
  /* 原本写的过渡、定位样式保留即可 */
  transition: all 0.2s ease;
  position: absolute;
  top: 100%;
}

/* 导航项hover时的菜单展开状态 */
.nav .nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  /* 展开后恢复正常鼠标事件响应 */
  pointer-events: auto;
}

额外兜底优化 #

如果加了上面的代码还有极低概率复现，可以补两个优化点：

• 不要给隐藏状态的下拉层保留布局占位，如果之前用opacity: 0做显隐但没有加visibility: hidden，一定要补上，Safari对仅透明但可见的元素命中判定范围和Chrome/Firefox逻辑不一致
• 给下拉菜单加10ms级别的transition-delay，避免光标快速划过时浏览器瞬时触发hover状态，这个延时用户完全感知不到，但能过滤掉绝大多数误判

内容的提问来源于stack exchange，提问作者Patrick Gammelmark