基本上,当您缩小选项卡的大小以充当响应式网站时,我已经堆叠了大型菜单选项。但是,您无法滚动查看大型菜单中的其他选项。我该如何解决这个问题。
您可以看到我无法滚动查看大型菜单中的其他选项。
.navBar {
font-family: Arial;
background-color: #333;
overflow: hidden;
}
.navBar > a {
float: left;
font-size: 12px;
color: #FFF;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.menuDropDown {
float: left;
overflow: hidden;
}
.menuDropDown > #menuButton {
font-size: 12px;
border: none;
outline: none;
color: #FFF;
padding: 6px 12px;
background-color: inherit;
font: inherit;
margin: 0;
}
#menuButton:hover, .navBar > .menuDropDown:hover > #menuButton {
background-color: #CCC;
color: #1B315E;
}
.menuContent {
display: none;
position: absolute;
background-color: none;
width: 100%;
left: 0;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menuDropDown:hover > .menuContent {
display: block;
}
.menuColumn {
float: left;
width: 25%;
padding: 10px;
background-color: #CCC;
height: 250px;
overflow-y: auto;
}
#menuColumnHeader {
color: #1B315E;
}
.menuColumn > a {
float: none;
color: #1B315E;
padding: 12px;
text-decoration: none;
display: block;
text-align: left;
font-size: 14px;
}
.menuColumn > a:hover {
background-color: #DDD;
}
.menuRow:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.menuColumn {
width: 100%;
height: auto;
}
}
<div class="navBar">
<div class="menuDropDown">
<button id="menuButton" title="Site Navigation"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn">
<h5 id="menuColumnHeader" title="Home Workspace">Home Workspace</h5>
<a href="#" title="Welcome"><i class="fas fa-exclamation-circle"></i> Welcome</a>
<a href="#" title="Timetable"><i class="far fa-calendar-alt"></i> Timetable</a>
<a href="#" title="Help"><i class="fa fa-question-circle"></i> Help</a>
<a href="#" title="Dashboard"><i class="fas fa-chart-line"></i> Dashboard</a>
</div>
<div class="menuColumn">
</div>
<div class="menuColumn">
</div>
<div class="menuColumn">
</div>
</div>
</div>
</div>
</div>
谢谢, 汤姆
最佳答案
您可以根据屏幕高度添加一个max-height
并启用滚动:
.navBar {
font-family: Arial;
background-color: #333;
overflow: hidden;
}
.navBar > a {
float: left;
font-size: 12px;
color: #FFF;
text-align: center;
padding: 6px 12px;
text-decoration: none;
}
.menuDropDown {
float: left;
overflow: hidden;
}
.menuDropDown > #menuButton {
font-size: 12px;
border: none;
outline: none;
color: #FFF;
padding: 6px 12px;
background-color: inherit;
font: inherit;
margin: 0;
}
#menuButton:hover, .navBar > .menuDropDown:hover > #menuButton {
background-color: #CCC;
color: #1B315E;
}
.menuContent {
display: none;
position: absolute;
background-color: none;
width: 100%;
left: 0;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
max-height:100vh;
overflow:auto;
}
.menuDropDown:hover > .menuContent {
display: block;
}
.menuColumn {
float: left;
width: 25%;
padding: 10px;
background-color: #CCC;
height: 250px;
overflow-y: auto;
}
#menuColumnHeader {
color: #1B315E;
}
.menuColumn > a {
float: none;
color: #1B315E;
padding: 12px;
text-decoration: none;
display: block;
text-align: left;
font-size: 14px;
}
.menuColumn > a:hover {
background-color: #DDD;
}
.menuRow:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.menuColumn {
width: 100%;
height: auto;
}
}
<div class="navBar">
<div class="menuDropDown">
<button id="menuButton" title="Site Navigation"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn">
<h5 id="menuColumnHeader" title="Home Workspace">Home Workspace</h5>
<a href="#" title="Welcome"><i class="fas fa-exclamation-circle"></i> Welcome</a>
<a href="#" title="Timetable"><i class="far fa-calendar-alt"></i> Timetable</a>
<a href="#" title="Help"><i class="fa fa-question-circle"></i> Help</a>
<a href="#" title="Dashboard"><i class="fas fa-chart-line"></i> Dashboard</a>
</div>
<div class="menuColumn">
</div>
<div class="menuColumn">
</div>
<div class="menuColumn">
</div>
</div>
</div>
</div>
</div>
关于html - 如何修复不存在滚动条的堆叠式大型菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53976115/