我使用的是bootstrap 3.3.7
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 {
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;
// 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>
