एक निश्चित ऊंचाई उल में एलआई आइटम कैसे स्क्रॉल करें?

Question

यहां मेरा उदाहरण HTML है।

और मैं अपने एलआई आइटम के लिए स्क्रॉल करना चाहता हूं।

जो 2 स्तरों में से हैं। मतलब, मैं प्रत्येक यूएल पर कक्षा लागू करना चाहता हूं।

तो मैं यह कैसे कर सकता हूं। JQuery या सीएसएस tweaking का उपयोग करके।

पीएस: मैं इस 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

अपने पोस्ट मार्क-अप के साथ

, और सर्वोत्तम अनुमान मैं आपके प्रश्न के आशय का बना सकता है (अपने शीर्षक वास्तव में उदाहरण आप से जुड़ा हुआ मेल नहीं खाता), मैं इस के साथ आया था:

#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

मुख्य विचार यूएल सूची के लिए एक निश्चित ऊंचाई निर्धारित करते हैं, और जोड़ने

overflow: scroll; 

शायद तुम भी के बाद से स्क्रॉल पट्टी कुछ की आवश्यकता होगी, यूएल की चौड़ाई tweak करने की आवश्यकता होगी करने के लिए है अतिरिक्त जगह।