nested list

simple nested list

HTML

<ul id="ScatList" style="list-style: none inside;cursor: pointer;position: relative;margin: 0px;height:10px;"> 
    <li> <em>List</em>
        <ul id="liststart" style="display: none;position:absolute;>
            
            <li> <a>First</a>
                <ul >
                    <li><a>1.1</a></li>
                    <li><a>1.2</a></li>
                </ul>
            </li>
            <li> Second
                <ul >
                    <li><a>2.1</a></li>
                    <li>2.2</li>
                </ul>
            </li>
            <li> Third
                <ul >
                    <li>3.1</li>
                    <li>3.2</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<script>
    $().ready(call());
</script>

JavaScript

function call() {
    jQuery('#ScatList').hover(function() {
        jQuery('#liststart').show(400);
    }, function() {
        jQuery('#liststart').hide();
    });
    jQuery('#liststart >li').hover(function() {
        jQuery(this).find('ul').show(400);
    }, function() {
        jQuery(this).find('ul').hide();
    });
    jQuery('#liststart >li> ul').hide();

}