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

HTML Kodu

                
<div class="outer">
<div class="menu">
    <ul>
        <li><a href="http://www.cssornekleri.com">Ana Sayfa</a></li>
        <li><a href="http://www.cssornekleri.com">Hakkımızda</a></li>
        <li><a href="http://www.cssornekleri.com">Hizmetler</a></li>
        <li><a href="http://www.cssornekleri.com">İletişim</a></li>
    </ul>
</div>
</div>
         

CSS Kodu

                
.outer a, .outer div, .outer li, .outer ul{
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
div.menu{
    width: 193px;
}
div.menu ul{
    list-style: none;
    text-indent: 0px;
}
div.menu li{
    margin-top: 3px;
}
div.menu a{
    font: 12px Verdana;
    padding: 4px;
    color: #646464;
    display:block;
    padding: 6px 30px;
    height: 20px;
    text-decoration: none;
    background: url('images/background.gif');
}
div.menu a:hover{
    background: url('images/highlight.gif') no-repeat right;
    padding: 6px 40px;
}:148px;background:url(images/nav_active.jpg) no-repeat;color:#b18211;}