我正在使用bootstrap 3.3.7
我创建了下拉菜单，并将子菜单降低到4个级别，到目前为止，它结合使用li和ul元素可以正常工作。问题是某些菜单下拉菜单非常大，因此我想强制滚动条和高度包含屏幕上下拉菜单的大小。
在顶层下拉菜单中，我向CSS添加了以下样式：
height:300px; overflow-y:scroll; overflow:hidden;
这使我在显示在第二级容器中的下一级上的第一级和第二级下拉菜单（均具有滚动条并排放置）上获得了预期的效果。什么时候也应该在外面。 （由于某些原因，以下代码无法使用代码片段工具正确显示，但是如果您将代码放在本地，则它会尽可能显示正确）。
基本上，如果您采用引导程序创建菜单和子菜单的默认方式，则每个子菜单都显示在父菜单的右侧，并稍微向下。我的目标是将每个级别的顶部设置为第一级菜单的顶部，并在必要时使每个级别的高度与滚动条保持一致。
body {
font-family: EvaluateFont, Arial, sans-serif;
font-weight: bold;
font-size: 9pt;
padding-top: 70px;
}
.navbar {
height: 70px;
}
.navbar-toggle {
top: -8px;
left: 0px;
width: 64px;
height: 69px !important;
border-style: none;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 20px !important;
padding-right: 20px !important;
background-color: lightblue;
border-radius: 0 0 0 0;
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0;
float: left !important;
}
.scrollable-menu {
height: 75px;
overflow-x: hidden;
overflow-y: auto;
}
.dropdown-menu { /* This is valid in the browser.*/
width: max-content;
border-bottom:none;
}
.dropdown-menu.main {
top: 161px !important;
height: 75px;
border: 0;
outline: none;
}
.wrapper {
position: relative;
cursor:auto;
}
li {
position: static;
list-style: none;
color: #333;
font-weight: 400;
white-space: nowrap;
// submenu
ul.wrapper {
// position on top of the menu item
position: absolute;
// top matches top
//top: 0;
// left matches 75% of menu item width
// left: 75%;
// show on top of the menu item
z-index: 10; /*put this to -1 once click state has been implemented (will put it below the scrollbar)*/
// do not show the submenu by default
display: none;
}
// display the submenu when we hover on the menu item
&:hover > .wrapper {
display: block;
top: 85px !important;
border: 0;
outline: none;
left: 235px;
width: auto;
}
}
li.level-1, li.level-2, ul.level-3 {
margin-left: -30px;
a {
display: block;
padding: 5px;
white-space: nowrap;
clear: both;
}
}
ul.level-2 > li {
margin-left: -25px;
}
ul.menu-list {
background-color:#b200ff;
}
ul.wrapper.level-2 {
background-color: #ff6a00;
width: 100%;
}
ul.wrapper.level-3 {
background-color: #451968;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-collapse collapse">
<ul class='nav navbar-nav'>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-pencil"></span> CREATE REPORT
<span class="caret"></span>
</a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-submenu not-visible"><a href="#" class="dropdown-header"><span class="text">Choose a type of report.</span><i class="fa fa-close pull-right icon-dropdown"></i></a></li>
</ul>
<ul class="scrollable-menu menu-list">
<li class="parent level-1" >
<a href="#">report set 1</a>
<ul class="wrapper level-2" role="menu" aria-labelledby="comenu">
<li><a href="#">rep 1</a></li>
<li><a href="#">rep 2</a></li>
<li><a href="#">rep 3</a></li>
</ul>
</li>
<li class="parent level-1">
<a href="#">rep set 2</a>
<ul class="wrapper scrollable-menu menu-list level-2">
<li><a href="">rep 1</a></li>
<li><a href="">rep 2</a></li>
<li><a href="">rep 3</a></li>
<li><a href="">rep 4</a></li>
<li><a href="">rep 5</a></li>
<li><a href="">rep 6</a></li>
<li><a href="">rep 7</a></li>
<li class="parent level-2">
<a href="#">rep 7 sub </a>
<ul class="wrapper menu-list level-3">
<li><a href="">sub 1</a></li>
<li><a href="">sub 2</a></li>
<li><a href="">sub 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>