Drop Down Menus

by santosh_patnala

HTML

<!--This Example is about Drop Down Menus-->
<div id="menu">
    <ul class="mainMenuNav">
        <li><a href="#" style="height:28px; width:165px;">Home</a>

        </li>
        <li><a href="#" style="height:28px; border-left:1px solid #C8C8C8; width:165px;background:url(Images/menu-arr.png) no-repeat scroll 150px 28px transparent;">Corporate</a>

            <ul
            class="sub-menu">
                <li><a href="#" class="sub-menu-a">About Us</a>

                </li>
                <li><a href="#" class="sub-menu-a">Our Approach</a>

                </li>
                <li><a href="#" class="sub-menu-a">Testimonials</a>

                </li>
                <li><a href="#" class="sub-menu-a">News and Information</a>

                </li>
                <li><a href="#" class="sub-menu-a">The Webtransform Difference</a>

                </li>
                <li><a href="#" class="sub-menu-a">Case Study</a>

                </li>
    </ul>
    </li>
    </ul>
</div>

CSS

#menu .mainMenuNav {
    background:-moz-linear-gradient(center top, #E8E8E8 0%, #D6D6D6 100%) repeat scroll 0 0 transparent;
    -webkit-linear-gradient(center top, #E8E8E8 0%, #D6D6D6 100%) repeat scroll 0 0 transparent;
    -o-linear-gradient(center top, #E8E8E8 0%, #D6D6D6 100%) repeat scroll 0 0 transparent;
    float:left;
    border-bottom:1px solid #636D77;
    width:1000px;
}
#menu {
    position: relative;
    /*margin-left: 30px;*/
    width:1000px;
    float:left;
}
#menu a {
    display: block;
    width: 155px;
    font-size:0.846154em;
    color:#595959;
    /* height:24px;*/
    font-family:Arial;
    padding-top:8px;
    position:relative;
    text-align:center;
    text-transform:uppercase;
}
#menu a:hover {
    text-decoration:none;
    color:#1A1A1A;
}
#menu ul {
    list-style-type:none;
}
#menu li {
    float:left;
    position:relative;
    text-align:center;
}
#menu ul.sub-menu {
    display:none;
    position:absolute;
    top:37px;
    /*left:35px;*/
    left:0px;
    padding:10px;
    z-index:90;
    background:#E7E7E7;
}
#menu ul.sub-menu a.sub-menu-a {
    color:#919191;
    width:200px;
    text-align:left;
    font-family:Arial;
    font-size:11px !important;
}
#menu ul.sub-menu a.sub-menu-a:hover {
    color:#547EA8;
}
#menu ul.sub-menu li {
    text-align:left;
}
#menu li:hover ul.sub-menu {
    display:block;
    border:1px solid #ececec;
    border-top:none;
}