Hover Menu

Demo of Hover

by wanikirtesh

HTML

<ul class="top">
    <li><a href="#">Menu1</a>

    </li>
    <li> <a href="#">Menu2 >></a>

        <ul class="sub">
            <li><a href="#">SubMenu1</a>
            </li>
            <li> <a href="#">SubMenu2 >></a>

                <ul class="sub">
                    <li><a target="_blank" href="http://www.google.com">Link to Google</a>

                    </li>
                    <li><a href="http://facebook.com">Link to Facebook</a>

                    </li>
                </ul>
            </li>
            <li><a href="#">SubMenu3</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Menu3</a>

    </li>
</ul>

CSS

.sub, .subsub {
    display:none;
}
li{border:1px solid #000;display:block;margin-top:3px;width:300px;overflow:hidden;background:#F7F7F7;}
li li{background:#F0F0F0}
li li li{background:#999}
a{text-decoration:none; font-family:impact;color:#4679BD}

JavaScript

$(document).ready(function () {
    $("ul.top li").hover(function () { //When trigger is hovered...
        $(this).children("ul.sub").slideDown('fast').show();
    }, function () {
        $(this).children("ul.sub").slideUp('slow');
    });
});