Bootstrap导航下拉菜单悬停问题：调整间距后菜单消失及空白修复

问题说明 #

• 为.dropdown-menu设置margin-top:15px后，鼠标无法移至下拉菜单，菜单会直接消失
• 尝试添加内部div并设置margin-top:20px，虽能正常触发菜单，但出现多余空白区域，破坏原有视觉效果

核心原因 #

设置margin-top后，下拉菜单与父元素.dropdown之间产生空白间隙，鼠标从导航按钮移向菜单时会脱离.dropdown的hover范围，导致菜单收起；而内部加div的方式是用内边距/外边距撑开空间，必然会留下空白。

解决方法 #

方案1：透明边框法（推荐） #

用透明上边框替代margin-top，既保留间距，又不会产生hover中断的间隙（边框属于元素自身范围）：

.dropdown:hover .dropdown-menu {
  display: block;
  /* 替换margin-top为透明上边框 */
  border-top: 15px solid transparent;
  opacity: 1;
  visibility: visible;
}

.dropdown-menu {
  background-color: #000;
  width: 250px;
  padding: 10px;
  border: 1px solid rgb(53, 53, 53);
  /* 去掉默认上边框避免重复 */
  border-top: none;
}

方案2：父元素延伸hover范围法 #

给.dropdown添加底部内边距，同时调整菜单的负外边距，让父元素的hover范围覆盖间隙区域：

.dropdown {
  padding-bottom: 15px;
}

.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: -15px;
  opacity: 1;
  visibility: visible;
}

完整修改代码 #

<!DOCTYPE html>
<html>
  <head>
    <!-- Bootstrap -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <style>
      * {
        background-color: #000;
        color: #fff;
      }

      .dropdown:hover .dropdown-menu {
        display: block;
        border-top: 15px solid transparent;
        opacity: 1;
        visibility: visible;
      }

      .dropdown .dropdown-menu {
        display: none;
        opacity: 0;
      }

      .dropdown-menu {
        background-color: #000;
        width: 250px;
        padding: 10px;
        border: 1px solid rgb(53, 53, 53);
        border-top: none;
      }

      .dropdown-menu .dropdown-item {
        margin-bottom: 10px;
      }

      .dropdown-menu .dropdown-item:last-child {
        margin-bottom: 0;
      }

      .dropdown-menu .dropdown-item:hover,
      .dropdown-menu .dropdown-item:focus {
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <li class="px-2 dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Developers
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Documentation</a>
      </div>
    </li>
  </body>
</html>

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