Menu Example

Menu example copied from stack overflow answer.

by burhans

HTML

<div id="menu">
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Lorem</a>
            <ul>
                <li><a href="#">Blam</a></li>
                <li><a href="#">Blam!</a></li>
                <li><a href="#">Kapow!</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Ipsum</a>
        </li>
        <li><!-- DropDown-->
            <a href="#" class="dropdown">Drop Down</a>
            <ul>
                <li><a href="#">Dd Item</a></li>
                <li><a href="#">Another One</a></li>
                <li><a href="#">Lalalal</a></li>
                <li><a href="#">Item</a></li>
            </ul>
            <div class="clear"></div>
        </li>
    </ul>
    <div class="clear"></div>
</div>

CSS

.clear
{
    clear: both;
    font-size: 0;
    line-height: 0;
}

#menu
{
    background: #3A7099;
    border: 1px solid #265A82;
    font: bold 12px Verdana,Arial,Helvetica,tahoma,sans-serif,"Trebuchet MS";
    margin: 0;
    padding: 0;
}

#menu *
{
    margin: 0;
    padding: 0;
}

#menu ul
{
    display: block;
    float: left;
    position: relative;
}

#menu ul li
{
    background: #3A7099;
    display: block;
    float: left;
    list-style: none;
    position: relative;
}

#menu ul li:hover
{
    background: #4179A3;
}

#menu ul li a
{
    border-left: 1px solid #5583A6;
    border-right: solid #265A82;
    color: #EEEEEE;
    display: block;
    padding: 5px 10px;
    text-decoration: none;
}

#menu ul li a:hover
{
    color: #fff;
    text-decoration: none;
}

#menu ul li ul
{
    border: 1px solid #265A82;
    display: none;
    left: 0;
    margin-left: -1px;
    position: absolute;
}

#menu ul li ul li
{
    list-style: none;
    background: #E1EBF2;
}

#menu ul li ul li:hover
{
    background: #EBF2F7;
}

#menu ul li ul li a
{
    border: 0 solid #B4CAD9;
    border-top-width: 1px;
    color: #333333;
    display: block;
    font-weight: normal;
    padding: 5px 10px;
    text-decoration: none;
    width: 150px;
}

#menu ul li ul li a:hover
{
    color: #444444;
    text-decoration: none;
}

#menu ul li ul li:last-child,
#menu ul li ul
{
    -khtml-border-radius-bottomright: 8px;
    -khtml-border-radius-bottomleft: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

JavaScript

$(document).ready(function ()
{
    $('#menu ul li').hover(
        function ()
        {
            $('ul', this).slideDown(50);
        },
        function ()
        {
            $('ul', this).slideUp(50);
        });
});