如何为多级下拉菜单的父级与子级菜单同时添加滚动条？

核心解决思路 #

给父级和子级下拉容器分别设置最大高度与垂直滚动属性，同时调整子菜单的定位规则，避免被父菜单的滚动区域截断。

具体代码调整方案 #

基于你的代码结构，修改以下CSS规则即可实现需求：

1. 父级下拉菜单样式
   给父级.dropdown-menu设置滚动属性：

.dropdown-menu {
  max-height: 300px; /* 可根据需求自定义高度 */
  overflow-y: auto;
  position: relative; /* 为子菜单提供正确的定位基准 */
}

2. 子级下拉菜单样式
   给子级.submenu设置独立滚动，同时调整定位脱离父菜单滚动流：

.dropdown-menu .submenu {
  max-height: 250px; /* 可根据需求自定义高度 */
  overflow-y: auto;
  position: absolute;
  left: 100%;
  top: 0;
  margin-top: -6px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

额外优化提示 #

• 可根据实际菜单选项数量，灵活调整max-height的数值
• 如果子菜单出现被页面右侧边缘截断的情况，可将left: 100%改为right: 100%，让子菜单向左侧展开
• 若不需要水平滚动，可添加overflow-x: hidden隐藏横向滚动条

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