Bootstrap 5 巨型下拉菜单快速消失问题求助

你的问题核心是下拉菜单与触发按钮之间存在间隙，导致鼠标从按钮移向菜单时，脱离了.dropdown-hover元素的hover范围，菜单随即隐藏。以下是具体修复方案：

问题定位 #

查看你的CSS代码，.dropdown-menu设置了：

transform: translate(-50%, 15px);

这里的15px是菜单顶部相对于父元素的垂直偏移量，直接造成了按钮和菜单之间的空白区域。当鼠标从按钮移向菜单时，会短暂离开.dropdown-hover的hover区域，触发菜单隐藏逻辑。

修复步骤 #

1. 消除菜单与按钮的间隙 #

修改.dropdown-menu的transform属性，把垂直偏移从15px改为0，让菜单与按钮底部无缝衔接：

.dropdown-menu {
  width: 980px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0); /* 移除15px垂直偏移 */
  opacity: 0;
  visibility: hidden;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease; /* 过渡时间调整为合理的0.3s，无需5s */
}

2. 可选：扩展父元素hover范围（备用方案） #

如果需要保留微小间隙，可以给.dropdown-hover添加padding-bottom，让父元素的hover范围覆盖间隙区域：

.dropdown-hover {
  padding-bottom: 15px; /* 值与菜单垂直偏移量一致 */
}

3. 避免JS与CSS hover冲突 #

你的代码同时使用了Bootstrap下拉JS（data-mdb-toggle="dropdown"）和自定义hover CSS逻辑，容易引发交互冲突。如果只需要hover触发下拉，建议移除data-mdb-toggle="dropdown"和data-mdb-dropdown-init属性，纯用CSS控制显示。

修改后的完整CSS示例 #

.header {
  min-height: 70pt;
}

#alaid-header .logo h1 {
  font-size: 38px;
  margin: 0;
  line-height: 0;
  font-weight: 600;
  letter-spacing: 1px;
}

#alaid-header .logo h1 a,
#alaid-header .logo h1 a:hover {
  color: #3c4133;
  text-decoration: none;
}

#alaid-header .logo img {
  padding: 5px;
  margin: 0;
  max-height: 78px;
}

.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a {
  color: #026a3f !important;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
  color: #c57b0d !important;
}

.navbar a i {
  color: #c57b0d !important;
}


/* dropdown 2 */

.dropdown-menu {
  width: 980px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0); /* 修复垂直间隙 */
  opacity: 0;
  visibility: hidden;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease; /* 调整合理过渡时间 */
}

.dropdown-hover:hover>.dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index: 250;
}

.dropdown-hover>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
  pointer-events: none;
}

.dropdown .dropdown-menu a {
  font-size: 13px !important;
  margin-left: -29px;
}

.nav-item {
  padding: 0.5rem 0; /* 修复拼写错误：0xp改为0 */
}

修改后的HTML（移除冲突的JS属性） #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css"/>

<header id="alaid-header" class="d-flex align-items-center bg-white shadow header">
  <div class="container d-flex justify-content-between">
    <div class="logo">
      <h1 class="text-light">
        <a href="index.php">
          <img src="https://via.placeholder.com/50" class="w-100" />
        </a>
      </h1>
    </div>

    <nav id="navbar" class="navbar alaid-navbar">
      <ul>
        <li><a class="nav-link active" href="index.php">Home</a></li>
        <li class="nav-item dropdown-hover position-static">
          <a class="nav-link" href="#" id="navbarDropdown" role="button" aria-expanded="false">
            Lorem ipsum<i class="bi bi-chevron-down"></i>
          </a>
          <!-- Dropdown menu -->
          <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="border-top-left-radius: 0;border-top-right-radius: 0;">
            <div class="container mx-0">
              <div class="row my-4">
                <div class="col-md-6 col-lg-6 mb-3 mb-lg-0">
                  <div class="list-group list-group-flush">
                    <h6><strong>Lorem3</strong></h6>
                    <hr />
                    <a href="">lorem ipsum eer</a>
                    <a href="">lorem ipsum</a>
                    <a href="">lorem emsm</a>
                  </div>
                </div>

                <div class="col-md-6 col-lg-6 mb-3 mb-lg-0">
                  <div class="list-group list-group-flush">
                    <h6><strong>Dogs</strong></h6>
                    <hr />
                    <a href="">Caucaian</a>
                    <a href="">Bull</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>

      <i class="bi bi-list mobile-nav-toggle"></i>
    </nav>
  </div>
</header>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>

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