jQuery Dropdown Navigation Menu 2

A simple jQuery-driven dropdown navigation menu. With animation of sub-menu items.

by the_voder

HTML

<body>
    <ul id="nav">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Main Menu 1</a>
            <!-- Sub Menu 1 -->
            <ul>
                <li>
                    <a href="#">Sub-Item 1</a>
                </li>
                <li>
                    <a href="#">Sub-Item 2</a>
                </li>
                <li>
                    <a href="#">Sub-Item 3</a>
                </li>
                <li>
                    <a href="#">Sub-Item 4</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Main Menu 2</a>
            <!-- Sub Menu 1 -->
            <ul>
                <li>
                    <a href="#">Sub-Item 1</a>
                </li>
                <li>
                    <a href="#">Sub-Item 2</a>
                </li>
            </ul>
        </li>
    </ul>
</body>

CSS

#nav {
    font-family:'MedioRegular', "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 15px;
    text-transform: uppercase;
    margin:10px 0 0 10px;
    padding:0;
    list-style:none;
    line-height: 25px;
}
#nav li {
    float:left;
    display:block;
    width:167px;
    position:relative;
    z-index:500;
    margin:0 1px;
}
#nav li a {
    display:block;
    padding:0 0 0 20px;
    height:25px;
    text-decoration:none;
    color:#fff;
    background: #111;
    text-align:left;
}
#nav li a:hover {
    color:#fff;
    background: #111;
}
#nav a.selected {
    color:#fff;
    background: #111;
}
#nav ul {
    position:absolute;
    left:0;
    /*display:none;*/
    margin:0 0 0 -1px;
    padding:0;
    list-style:none;
    border-bottom:1px solid #111;
}
#nav ul li {
    width:165px;
    float:left;
    display:none;
    border-left:1px solid #111;
    border-right:1px solid #111;
}
#nav ul a {
    display:block;
    height:25px;
    padding:0 0 0 23px;
    color:#111;
    background:url(../images/spacer.gif) repeat;
}
#nav ul a:hover {
    text-decoration:none;
}

JavaScript

$(document).ready(
    function () {
        $('#nav li').hover(
        // Function runs when mouse rolls over element
        function () {
            // Loop through matched elements
            $('ul li', this).stop(true, true).each(function (i) {
                $(this).delay(i * 100).fadeIn(500);
            });
        },
        // Function runs when mouse rolls off element
        function () {
            // Get index of final item in matched list
            var lastindex = $('ul li', this).length - 1;
            // Loop through matched elements
            $('ul li', this).stop(true, true).each(function (i) {
                $(this).delay((lastindex - i) * 100).fadeOut(100);
            });
        });
});