Bootstrap固定定位多级下拉菜单无法滚动问题

安全阿岳

2026-7-7

在给Bootstrap导航栏添加navbar-fixed-top类后，多级下拉菜单会出现无法滚动的问题，仅为.dropdown-menu添加max-height和overflow-y属性无法解决，核心原因有两点：

固定定位的导航栏改变了下拉菜单的定位上下文，下拉菜单默认由内容撑开高度，不会自动触发滚动。
子级下拉菜单默认相对于父级下拉菜单定位，当父级设置滚动属性后，子菜单会被父级的overflow规则裁剪，无法完整显示。

修复方案

添加以下CSS样式（保留原有子菜单基础样式的同时补充修复规则）：

/* 顶级下拉菜单：限制高度为视口剩余空间，添加滚动条 */
.navbar-fixed-top .dropdown-menu {
  max-height: calc(100vh - 50px); /* 50px对应导航栏的高度 */
  overflow-y: auto;
}

/* 子级下拉菜单：脱离父级滚动容器，改用固定定位避免被裁剪 */
.navbar-fixed-top .dropdown-submenu > .dropdown-menu {
  position: fixed;
  top: auto;
  left: calc(100% + 8px);
  max-height: calc(100vh - 50px);
  overflow-y: auto;
}

/* 右侧导航的子菜单：调整右侧偏移避免超出视口 */
.navbar-fixed-top .navbar-right .dropdown-submenu > .dropdown-menu {
  left: auto;
  right: calc(100% + 8px);
}

/* 保留原有子菜单的基础交互样式 */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
  border-left-color: #fff;
}