How to scroll LI items in a fixed height UL?


Tags: jquery,css,scroll,html-lists

Problem :

Here is my example HTML.

And I want to have scroll for my LI items.

Which are of 2 levels. Means, I want to apply class on every UL.

So how can I do that. By using JQuery or CSS tweaking.

PS: I am using this 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>  


Solution :

With your posted mark-up, and the best guess I could make of the intent of your question (your title doesn't really match the example you linked to), I came up with this:

#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.


    CSS Howto..

    How To Change Text Box Content On Hover

    How to slide/grow a tile to position with 90x90px with CSS

    CSS How to Make Image Display outside of div

    How to add a new CSS class to a Link Badge if the value is 0?

    How do you modify the modal height without removing the slide effect in Bootstrap Twitter?

    How would you style a PHP suffix with CSS?

    How to have proper spacing between items in the navbar regardless of word size?

    How can I dock the button to jQueryUI dialog bottom as the dialog inner content increases?

    How to force modern Internet Explorer to show proper gradient background in real web sites

    How can I add a whitespace in between my element and psuedo element?

    how to change width of without affecting width

    Both DIV Popups Shown Instead of One

    how to create a table layout with float in css

    Need help understanding how to format inline CSS of Table data from a JS file

    mkd2pdf, wkhtmltopdf, how to make PDF for slide

    CSS: How to get a positioned div to resize horizontally with window instead of getting scrollbars

    CSS: How to omit the spacing between an h3 and a p element?

    CSS - How to only apply a style to a div that is inside another div?

    How to use css to put an item just above the top of the screen?

    How to make text wrap above and below a div?

    Hide and show divs with multiple common classes

    How can I prevent a flex container from overflowing/underflowing?

    How can I create left & right side fixed width elements with a center that fills the remainder?

    how to get a div to randomly move around a page (using jQuery or CSS)

    How can I align the checkboxes in a form when using table display with CSS?

    How to get the “declared” CSS value, not the computed CSS value

    How to avoid CSS selector applying to more than one level of descendants

    How to have img popout when containing div is clicked (Image gallery)?

    Wordpress Plugin - How can I make the text responsive, OR replace it with a new div?

    How do i check if a link has been visited?