Question

目前我有一个下拉菜单，当用户将鼠标悬停在菜单上时会弹出。下拉列表当前显示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>

Answer 1

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

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

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

1 个答案: