Mini Yatay Css Menü Örneği

Sadece css kodlarıyla yapılmış güzel minik bir menü örneği
Bu menü örneğinde İmaj (resim) dosyası kullanılmadan oldukça güzel hazırlanmış bir CSS menü örneği.

Örnek Görünüm:

• ana sayfa
• hakkımızda
• ürünler
• hizmetler
• iletişim

HTML Kodu:

<ul>
<ul>
 	<li><a href="http://www.cssornekleri.com">ana sayfa</a></li>
</ul>
</ul>
&nbsp;
<ul>
 	<li><a id="current" href="http://www.cssornekleri.com">hakkımızda</a></li>
</ul>
&nbsp;

&nbsp;
<ul>
 	<li><a href="http://www.cssornekleri.com">ürünler</a></li>
</ul>
&nbsp;

&nbsp;
<ul>
 	<li><a href="http://www.cssornekleri.com">hizmetler</a></li>
</ul>
&nbsp;

&nbsp;
<ul>
 	<li><a href="http://www.cssornekleri.com">iletişim</a></li>
</ul>
&nbsp;

CSS Kodu:

<style type="text/css">
ul#minitabs{
    padding-top:60px;
    background: #FFF;
    font: 76% Arial,sans-serif;
    text-align:center;
    list-style: none;
    margin: 0;
    padding: 7px 0;
    border-bottom: 1px solid #CCC;
    font-weight: bold;
    text-align: center;
    white-space: nowrap
}
ul#minitabs li{
    display: inline;
    margin: 0 3px
}
ul#minitabs a{
    text-decoration: none;
    padding: 0 0 3px;
    border-bottom: 4px solid #FFF;
    color: #999
}
ul#minitabs a#current{
    border-color: #F60;
    color:#06F
}
ul#minitabs a:hover{
    border-color: #F60;
    color: #666
}
</style>