Menu bar

by Thulasi Ram.S

HTML

<ul id="nav">
    <li>A
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

CSS

/*******************************Nav Dropdown***********************/
#nav ul
{
    list-style: none;
    position: absolute;
    display: none;
    text-align: left;
    background-color: Red;
}

#nav > li
{
    display: inline-block;
    padding: 2px 0 0 0;
}

#nav li a
{
    display: inline-block;
    text-decoration: none;
    padding: 5px 10px;
    margin: 0 5px;
    color: #ffffff;
}

#nav li:hover ul
{
    display: block;
    background-color: #43577B;
    z-index: 999;
    -moz-box-shadow: 0px 6px 10px -4px rgba(0,0,0,.9);
    -webkit-box-shadow: 0px 6px 10px -4px rgba(0,0,0,.9);
    box-shadow: 0px 6px 10px -4px rgba(0,0,0,.9);
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}

#nav > li:hover > a, #nav ul li:hover a
{
    background-color: #ffffff;
    color: #000000;
    display: block;
}

#nav ul li:last-child:hover a
{
    margin-bottom: 5px;
}


a
{
    cursor: pointer;
    color: #003399;
    text-decoration: none;
}

    a:hover
    {
        text-decoration: underline;
    }