Örnek Çalışmayı buraya komple bilgisayarınıza indirebilirsiniz. HTML Kodu

                
<div>
        <ul id='menu_gri'>
            <li class="button"><a class='current' href='http://www.cssornekleri.com'>Ana Sayfa</a></li>
            <li class="button"><a href='http://www.cssornekleri.com'>Hakkımızda</a></li>
            <li class="button"><a href='http://www.cssornekleri.com'>İletişim</a></li>
        </ul>
    </div
              

CSS Kodu

                
ul#menu_gri
{
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:30px;
    font-size:12px;
    font-weight:bold;
    background:transparent url(images/nav_bg.gif) repeat-x top left;
    font-family:Arial, Helvetica, sans-serif;
    border-bottom:1px solid #000000;
    border-top:1px solid #000000;
}

ul#menu_gri li
{
    display:block;
    float:left;
    margin:0;
    padding:0;
}
    
ul#menu_gri li a
{
    display:block;
    float:left;
    color:#999999;
    text-decoration:none;
    font-weight:bold;
    padding:8px 20px 0 20px;
}
    
ul#menu_gri li a:hover
{    
    color:#FFFFFF;
    height:22px;
    background:transparent url(images/nav_bg.gif) 0px -30px no-repeat;        
}
    

ul#menu_gri li a.current
{
    display:inline;
    height:22px;
    background:transparent url(images/nav_bg.gif) 0px -30px no-repeat;    
    float:left;
    margin:0;
}