Jak przewijać przedmioty LI na stałej wysokości UL?

Question

Oto mój przykładowy kod HTML.

I chcę mieć przewijanie dla moich przedmiotów LI.

Które są z 2 poziomów. Znaczy, chcę zastosować klasy na każdym UL.

Jak mogę to zrobić? Korzystając z podkręcania JQuery lub CSS.

PS: Używam tego example.

<ul id="nav" class="dropdown"> 
<li class="dir"> 
    Item_Root 
    <ul> 
     <li class="dir"> 
      Item_1_Level 
      <ul> 
       <li>Item_Level_2</li> 
       <li>Item_Level_2</li> 
       <li>Item_Level_2</li> 
       <li>.... up to N items</li> 
      </ul> 
     </li> 
     <li>Item_Level_1</li> 
     <li>Item_Level_1</li> 
     <li>Item_Level_1</li> 
     <li>Item_Level_1</li> 
     <li>.... up to N items</li> 
    </ul> 
</li> 

</ul> 

Answer 1

Dzięki swoim wysłana dopłata, a najlepsze, że mógłbym zrobić z zamiarem pytaniem (tytuł niezbyt pasuje przykład jesteś powiązany), wpadłem na to:

#nav { 
    width: 12em; 
    height: 20em; 
    line-height: 2em; 
    border: 1px solid #ccc; 
    padding: 0; 
    margin: 0; 
    overflow: scroll; 
    overflow-x: hidden; 
} 

li { 
    border-top: 1px solid #ccc; 
} 

ul ul { 
    text-indent: 1em; 
} 

ul ul ul { 
    text-indent: 2em; 
} 

JS Fiddle Demo.

Answer 2

Główną ideą jest, aby ustawić stałą wysokość na liście UL i dodać

overflow: scroll; 

Może będzie trzeba także dostosować szerokość UL, ponieważ pasek przewijania będą musiały niektóre dodatkowa przestrzeń.