Bootstrap下拉菜单Hover异常问题：悬浮显示不稳定的解决方案咨询

这个问题我之前也碰到过，核心原因是触发下拉的.dropdown元素和下拉菜单之间存在视觉/物理间隙——当鼠标从触发链接移向菜单时，只要路径经过这个间隙，浏览器就会判定鼠标离开了.dropdown元素，直接触发收起逻辑，导致菜单消失。

具体优化方案 #

方案1：消除触发区与菜单的间距（最直接）

默认情况下Bootstrap的.dropdown-menu会自带margin-top: 2px的间距，我们可以直接去掉这个间距，同时微调下拉箭头的位置适配：

@media (min-width:768px) {
  .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* 移除默认间距，让菜单紧贴触发链接 */
  }
  /* 保留你的箭头样式，位置不需要调整 */
  .dropdown-menu-arrow:before {
    border-bottom: 7px solid rgba(0, 0, 0, 0.2);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
    display: inline-block;
    left: 9px;
    position: absolute;
    top: -7px;
  }
  .dropdown-menu-arrow::after {
    border-bottom: 6px solid #FFFFFF;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    display: inline-block;
    left: 10px;
    position: absolute;
    top: -6px;
  }
  /* 额外给触发链接加底部padding，扩大hover触发范围 */
  .dropdown-toggle {
    padding-bottom: 8px;
  }
}

方案2：用过渡动画缓冲鼠标移动（保留间距的前提下）

如果想保留菜单和触发区的间距，可以用visibility+opacity替代display属性，配合过渡动画给鼠标移动留缓冲时间，避免瞬间收起：

@media (min-width:768px) {
  .dropdown .dropdown-menu {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
    margin-top: 2px; /* 保留默认间距 */
  }
  .dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
  }
  /* 保留你的箭头样式 */
  .dropdown-menu-arrow:before {
    border-bottom: 7px solid rgba(0, 0, 0, 0.2);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
    display: inline-block;
    left: 9px;
    position: absolute;
    top: -7px;
  }
  .dropdown-menu-arrow::after {
    border-bottom: 6px solid #FFFFFF;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    display: inline-block;
    left: 10px;
    position: absolute;
    top: -6px;
  }
}

为什么你之前加padding没用？ #

你尝试给下拉项加padding，但问题出在触发元素和菜单之间的间隙，而非下拉项本身的范围。下拉项的padding只会扩大菜单内部的可点击区域，无法填补触发区到菜单之间的空白，所以解决不了根本问题。

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