Css İle Efektli Basit Menü Yapımı

Css Kodu :

#navigasyon {
 margin:0px auto;
 width:550px;
 height:50px;
}

#navigasyon ul{
 list-style-type:none;
 margin-top:0px;
 font-family:"Comic Sans MS", cursive;
 }
 
 
#navigasyon ul li{
 float:left;
 display:block;
 font-size:21px;
 background-color:#09F;
 }
#navigasyon ul li a{
 text-decoration:none;
 display:block;
 padding:10px;
 color:#FFF;
 transition:all 0.6s ease-out;
 -o-transition:  all 0.6s ease-out;
 -moz-transition:all 0.6s ease-out;
 -webkit-transition:all 0.6s ease-out;
 } 
 #navigasyon ul li a:hover{
 background-color:#F90;
 display:block;
 color:#FFF;
 }

Html Kodu :

<div id="navigasyon">
<ul>
  <li><a href="#">Anasayfa</a></li>
  <li><a href="#">Hakkımızda</a></li>
  <li><a href="#">Resimler</a></li>
  <li><a href="#">Site Haritası</a></li>
</ul>
</div>