Hi

I'm not professional and have basic question. I want to use css to have a multi-leyer list with scroll on each level. the problem is I can not scroll first layer in a proper way. my sample code is :

<ul id="nav">
 <li><a href="#">first</a>
        <ul class=firstLayer>
            <li><a href="#">1.1 </a>
                <ul class=secondLayer>
                    <li><a href="#">1.1.1</a></li>
                    <li><a href="#">1.1.2</a></li>
                   <li><a href="#">1.1.3 </a></li>
                    <li><a href="#">1.1.4 </a></li>
                   <li><a href="#">1.1.5</a></li>
                    <li><a href="#">1.1.6 </a></li>
                    <li><a href="#">1.1.7</a></li>
                    <li><a href="#">1.1.8 </a></li>
                </ul>
            </li>

        <li><ahref="#">2.1 </a></li>
        <li><a href="#">3.1 </a></li>
       <li><a href="#">4.1 </a></li>
       <li><a href="#">5.1 </a></li>
       <li><a href="#">6.1 </a></li>
       <li><a href="#">7.1 </a></li>
       <li><a href="#">8.1 </a></li>
        </ul>
    </li>
</ul>

and .secondLayer is :

.secondLayer{
      max-height:300px;
      overflow-y: scroll;
      overflow-x:hidden;
}
 

what shoud be my .firstLayer class?

I prefer to do it with css and without any javascript or jquery code. but if it's not possible what javascript code I have to use ?

I have attached my full code.

Thanks for any help

list.html

I don't know if this is what you are looking for

 

http://css-tricks.com/long-dropdowns-solution/

 

or this

 

http://ugate.wordpress.com/2013/06/28/scrollable-twitter-bootstrap-menus/