Bu makalemde CSS3 efektleriyle yapılmış bir yatay menü örneği ögreceksiniz.
Öncelikle HTML kodları şu şekildedir:

<div id="menu">
    <ul>
        <li><a href="#">Anasayfa</a></li>    
        <li><a href="#">Hakkımda</a></li>
        <li><a href="#">Galeri</a></li>
        <li><a href="#">Projeler</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
</div>

Burada ul tag'ı ile bir liste oluşturduk.

Sıra geldi CSS kodlarına:

#menu { 
    width: 615px; 
    margin: 0 auto; 
    font-family: 'Ubuntu', sans-serif; 
}

"menu" id'li dive genişlik verip margin ile ortaladık.

ul { 
    border-radius: 3px; /* oval köşeler */
    background: -moz-linear-gradient(top, #87e0fd 0%, #05abe0 100%);
    /* background'daki gradient efekti */
    float: left; /* sola dayıyoruz */
    list-style-type: none; /* listeleme sembollerini yok ediyoruz */
    margin:0; 
    padding:0; /* margin ve padding sıfırlıyoruz */
    border: 1px solid #53cbf1; /* yan çizgi veriyoruz */
}

Açıklamalar kodların içindedir.

li { 
    float:left; 
    line-height: 30px; 
    border-right: 1px solid #87e0fd; 
}

Burada listeyi yan yana yazdırıp 30px yükselik veri sağ çizgi verdik.

li:nth-last-child(1) { border-right: none; }

Son elemanın, yani örneğimizde en solda olan elemanın sağ border'ını sıfırladık.

li:hover { background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%) }

li elemanının üzerine gelindiğinde farklı renklerle yine gradient efekti verdik.

li a { 
    text-decoration: none; 
    text-transform: uppercase; 
    color: #fff; 
    font-weight: bold; 
    font-size: 13px; 
    padding: 3px 30px; 
    display: block; 
    text-shadow: 1px 1px 0 #05abe0;
}

Linkin stilini verdik. text-shadow ile yazıya gölge efekti verdik. Sanırım diğerlerini açıklamaya gerek yok.

li a:hover { text-shadow: 1px 1px 0 #009ec3; }

Üzerine gelindiğinde gölgenin renklerini değiştirdik.

Bu kodlar Firefox'da sorunsuz çalışacaktır. Webkit tarayıcıları için şu şekilde kullanmanız gerekmektedir:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(100%,#05abe0));
background: -webkit-linear-gradient(top, #87e0fd 0%,#05abe0 100%);