如何使我的下拉菜单可滚动

问题描述 投票:0回答:3

目前我有一个下拉菜单,当用户将鼠标悬停在它上面时会弹出。下拉菜单当前显示 8 个链接。我想放置 21 个链接,但这会占据整个屏幕。如何使我的弹出窗口可滚动,一次只显示 8 个项目?

这是我当前的弹出窗口,有 8 个链接:

<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>
html twitter-bootstrap twitter-bootstrap-3
3个回答
13
投票

试试这个。这将限制您的下拉菜单的高度,并且任何溢出都将通过滚动显示。

.dropdown-menu {
   max-height:200px;
   overflow:scroll; 
}

0
投票

您可以使用“vh”来代替 200px 使其相对于其视口,例如:

    .dropdown-menu {
       max-height: 70vh;
       overflow:scroll; 
    }

另请参阅: https://dev.to/lennythedev/css-gotcha-how-to-fill-page-with-a-div-270j


0
投票

如果我写这个

它在我的电脑上创建了下拉菜单,但在我的手机或平板电脑中停止了操作..当我将其留空时,它的相反....我应该写什么才能使下拉菜单在每个版本中都可滚动?

© www.soinside.com 2019 - 2024. All rights reserved.