css - How do you limit the number of items on show in the bootstrap btn-dropdowns -

I am creating a search bar with a bootstrap and a list of elements from the list. The problem is in the moment when I press the Category button, it shows every single category in the list at the same time - makes the UI terrible! How can I limit the number of concurrent options on the show?

This is an example of the problem:

For example, I can show the first 5 options and then have a scroll bar for the rest?

This markup is for me to create what is so far:

  & lt; Form class = "navbar-form" role = "search" action = "/ search" method = "get" & gt; & Lt; Div class = "input-group" & gt; & Lt; Input type = "text" class = "form-control" placeholder = "search for an event" name = "q" id = "q" & gt; & Lt; Div class = "input-group-btn" & gt; & Lt; Div class = "btn-group" role = "group" & gt; & Lt; Button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown" aria-expanded = "false" & gt; Dropdown & lieutenant; Span class = "carat" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; Ul class = "dropdown-menu" role = "menu" & gt; & Lt;% @ categories.each do | Class | & Gt%; & Lt;% Category sub_categories.each do | Sub_category | & Gt%; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt;% = sub_category.name% & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt;% end% & gt; & Lt;% end% & gt; & Lt; / Ul & gt;  

We are trying to show this problem a Bela can be found here:

Why not just add an overflow to the UL?

 . Menuu-scroll {overflow-y: scroll; Max-height: 200px; }