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

                
<ul id="navigation">
    <li class="b active"><a style="" href="#" class=""><strong>Ana Sayfa</strong></a></li>
    <li class="b"><a style="" href="#" class=""><strong>Hakkımızda</strong></a></li>
    <li class="b"><a style="" href="#" class=""><strong>Hizmetlerimiz</strong></a></li>
    <li class="b"><a style="" href="#" class=""><strong>Referanslar</strong></a></li>
    <li class="b"><a style="" href="#" class=""><strong>İletişim Bilgisi</strong></a></li>                                    
</ul>  
        

CSS Kodu

                
<style>
    ol,ul {
    list-style: none;
}

#navigation {
    background: #000 url('/img/menu/genel/01/navigation.gif') no-repeat;
    width: 816px; height: 69px;
    padding: 0 10px;
}
#navigation li {
    float: left;
    height: 61px;
}
/* Used this because I couldn't remove one...ugh. */
.b {
    background: url('/img/menu/genel/01/nav_border.gif') no-repeat right 29px;
}
#navigation a {
    text-decoration: none;
    float: left;
    color: #868686;
}
#navigation a strong {
    text-decoration: none;
    float: left;
    color: #868686;
    height: 37px;
    padding: 24px 35px 0;
}
#navigation a:hover, #navigation .active {
    background: url('/img/menu/genel/01/nav_left.gif') no-repeat top left;
    float: left;
    color: #fff;
}
#navigation a:hover strong, #navigation .active strong {
    text-decoration: underline;
    background: url('/img/menu/genel/01/nav_right.gif') no-repeat top right;
    float: left;
    color: #fff;
    height: 37px;
    padding: 24px 35px 0;
}

</style>