menus

Welcome to designers dairy blog here i have post article  how to design the menus using background color.

coding and css below

Html Code :

<div id="menu_bg"><!--menu_bg div starts here-->
<div id="menu">
    <ul>
                                                                                      
        <li><a href="#" class="current">home</a></li>
        <li><a href="#">Pets </a></li>
        <li><a href="#">Emergency </a></li>
        <li><a href="#">NGO</a></li>
        <li><a href="#"> Services and Products </a></li>   
                <li><a href="#"> Ads </a></li>   
                        <li><a href="#"> News </a></li>   
                        <li><a href="#">  Contact Us </a></li>                                   
    </ul>

</div>
</div><!--menu_bg div starts here-->
Css:
#menu_bg
{
 width:100%;
 height:42px;
 background-color:#000;
 padding:0;
 margin:0;
}
#menu{
    position:relative;
    font-family:Arial, Helvetica, sans-serif;
    margin:0 auto;

     width:970px;
     height:42px;
    background-color:#000000;       
        }
        #menu ul{
            list-style:none;
            margin:0px;
            padding:0px;
        }
            #menu li{
                list-style:none;
                display:block;
                float:left;            
                                       
            }
                #menu li a{
                    display:block;
                    float:left;
                    color: #FFF;
                    font-size:13px;
                    font-weight:bolder;
                    line-height:42px;
                    border:solid #000;
                    border-width:0px 1px 0 1px;
                    text-decoration:none;
                    padding:0 32px;               
                }
                    #menu li a:hover{
                        color: #FFF;
                        background-color:#8fc400;
                    }
                #menu li a.current{
                    display:block;
                    float:left;
                    background-color:#92c52f;
                                   
                    color:#fff;
                    text-transform:uppercase;
                    font-size:13px;
                    font-weight:bold;
                    line-height:42px;
                   
                    text-decoration:none;
                    padding:0 35px;   
                }
                    #menu li a:hover.current{
                        color:#fff;
                    }

For more free css menus Download