Bootstrap 4中如何让下拉菜单高度与子菜单保持一致？

嘿，我懂你想要的这个多级下拉菜单效果——主下拉菜单在子菜单展开时自动匹配子菜单的高度，收起时又回到原本的尺寸对吧？你的现有代码已经搭了个不错的基础，我来帮你完善一下，让这个交互更流畅自然。

核心思路 #

要实现这个效果，我们需要：

• 给主下拉菜单添加平滑过渡，避免高度突变
• 利用CSS伪类检测子菜单的hover状态，动态调整主菜单高度
• 确保子菜单隐藏时主菜单能恢复初始高度

完善后的CSS代码 #

/* 基础下拉菜单样式，覆盖默认框架样式（如Bootstrap） */
.dropdown-menu {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  /* 关键：添加高度过渡动画 */
  transition: height 0.3s ease;
  /* 默认高度自适应内容 */
  height: auto;
  overflow: hidden; /* 防止子菜单隐藏时内容溢出 */
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
}

/* 子菜单箭头样式优化（垂直居中） */
.dropdown-submenu a::after {
  content: "\203A"; /* 可替换成你喜欢的箭头符号 */
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: 1.1rem;
  color: #6b7280;
}

/* 子菜单展开时的定位与尺寸 */
.dropdown-submenu:hover .dropdown-menu,
.dropdown-submenu:focus .dropdown-menu {
  display: block;
  margin-top: -1px;
  margin-left: -1px;
  top: 0;
  left: 100%;
  min-height: 100%;
}

/* 核心：当子菜单被hover时，主下拉菜单高度自适应子菜单 */
.dropdown-menu:has(.dropdown-submenu:hover) {
  height: max-content;
}

/* 子菜单收起时，主菜单恢复默认高度 */
.dropdown-menu:not(:has(.dropdown-submenu:hover)) {
  height: auto;
}

/* 确保子菜单的父项是相对定位 */
.dropdown-submenu {
  position: relative;
}

关键细节说明 #

1. 过渡动画：通过transition: height 0.3s ease让高度变化更平滑，不会显得突兀
2. :has()伪类：这个现代CSS特性可以检测父容器内是否有被hover的子菜单，从而动态调整主菜单高度（目前Chrome、Firefox、Safari等主流浏览器都已支持）
3. height: max-content：让主下拉菜单自动拉伸到能容纳所有展开子菜单的高度
4. overflow: hidden：确保子菜单隐藏时，主菜单不会露出超出自身高度的内容

配套HTML示例（基于Bootstrap结构） #

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
  <div class="container">
    <a class="navbar-brand" href="#">多级菜单演示</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDropdowns" aria-controls="navbarDropdowns" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarDropdowns">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            主菜单1
          </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">普通菜单项</a>
            <a class="dropdown-item" href="#">另一个普通项</a>
            <!-- 二级子菜单 -->
            <li class="dropdown-submenu">
              <a class="dropdown-item dropdown-toggle" href="#">二级菜单</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">二级子项1</a>
                <a class="dropdown-item" href="#">二级子项2</a>
                <!-- 三级子菜单 -->
                <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" href="#">三级菜单</a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">三级子项1</a>
                    <a class="dropdown-item" href="#">三级子项2</a>
                    <a class="dropdown-item" href="#">三级子项3</a>
                  </div>
                </li>
              </div>
            </li>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

如果你的项目需要兼容不支持:has()的老浏览器，可以用一小段JavaScript监听hover事件，动态获取子菜单高度并赋值给主菜单，鼠标离开时恢复auto高度即可。

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