如何使我的下拉菜单可滚动 [英] How can I make my drop down menu scrollable
本文介绍了如何使我的下拉菜单可滚动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
目前我有一个下拉菜单,当用户将鼠标悬停在它上面时会弹出它.下拉列表当前显示 8 个链接.我想放置 21 个链接,但这会占据全屏.如何使我的弹出窗口可滚动,一次只显示 8 个项目?
这是我目前有 8 个链接的弹出窗口:
<div class="col-sm-3" id="about-tab"><a href="#" class="dropdown-toggle" data-toggle="dropdown">指定</a><ul class="dropdown-menu" role="menu"><li><a href="x-ray.html">X-Ray</a> <li><a href="#">开盘价计算器</a><li><a href="certification.html">认证</a><li><a href="door-cores.html">门芯</a><li><a href="frame-types-and-materials.html">帧类型&材料<li><a href="downloads.html">下载</a><li><a href="pas24-secure-by-design.html">PAS 24/Secure By Design</a><li><a href="#">预挂</a>
</a>
解决方案
试试这个.这将限制您的下拉菜单的高度,并且任何溢出都将通过滚动显示.
.dropdown-menu {最大高度:200px;溢出:滚动;}
At the moment I have a drop down menu which pops up when the user hovers over it. The drop down currently shows 8 links. I am wanting to put 21 links but this would take up the full screen. How do I make my pop up scrollable, only displaying 8 items at a time?
Here is my pop up currently with 8 links:
<a href="specifying.html">
<div class="col-sm-3" id="about-tab">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Specifying</a>
<ul class="dropdown-menu" role="menu">
<li><a href="x-ray.html">X-Ray</a>
</li>
<li><a href="#">S/Opening Calculator</a>
</li>
<li><a href="certification.html">Certification</a>
</li>
<li><a href="door-cores.html">Door Cores</a>
</li>
<li><a href="frame-types-and-materials.html">Frame Types & Materials</a>
</li>
<li><a href="downloads.html">Downloads</a>
</li>
<li><a href="pas24-secure-by-design.html">PAS 24/Secure By Design</a>
</li>
<li><a href="#">Pre-Hanging</a>
</li>
</ul>
</li>
</div>
</a>
解决方案
Try this. This will restrict your dropdown menu's height and whatever overflows will be shown with a scroll.
.dropdown-menu {
max-height:200px;
overflow:scroll;
}
这篇关于如何使我的下拉菜单可滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文