CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3
Michael Barley
Michael Barley

Reputation: 179

How can I make my drop down menu scrollable

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>

Upvotes: 5

Views: 25976

Answers (2)

Leon
Leon

Reputation: 1

Instead of 200px you can use 'vh' to make it relative to its viewport, e.g.:

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

see also: https://dev.to/lennythedev/css-gotcha-how-to-fill-page-with-a-div-270j

Upvotes: 0

phreakv6
phreakv6

Reputation: 2165

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; 
}

Upvotes: 13

Related Questions