CSS ile yapılmış dikey menü örneği, arka plan beyaz ve fare üzerine gelince yeşil oluyor.

Aarka plan beyaz ve fare üzerine gelince yeşil oluyor. CSS Kodlarınden istediğiniz değişiklikleri yaparak renkleri değiştirebilirsiniz.

– Kullanımı olduça basit.
– Sade CSS Kodları.
– Çok Kolay entegre edilebilir.

Örnek Görünüm:

CSS Kodu:

<style>
#anamenu {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 100%;
  width: 160px;
  padding: 0px;
  margin: 0px;
  border:1px;
  border-color:#000000;
}
#anamenu h1 {
  display: block;
  background-color:#D2FFD2;
  font-size: 90%;
  padding: 3px 0 5px 3px;
  border:none;
  border-color:#FFFFFF;
  color: #333333;
  margin: 0px;
  width:159px;
  }
#anamenu ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  border: none;
  }
  #anamenu ul li {
  margin: 0px;
  padding: 0px;
  }
  #anamenu ul li a {
  font-size: 80%;
  display: block;
  border-bottom: 1px dashed #C39C4E;
  padding: 5px 0px 2px 4px;
  text-decoration: none;
  color: #666666;
  width:160px;
  }
#anamenu ul li a:hover, #anamenu ul li a:focus {
  color: #000000;
  background-color: #D2FFD2;
  }
</style>

HTML Kodu:

<div id="anamenu">
<h1 align="center">MENU</h1>
<ul>
<ul>
 	<li><a tabindex="1" href="#">Ana Sayfa</a></li>
</ul>
</ul>
&nbsp;
<ul>
 	<li><a tabindex="2" href="#">Hakkımda</a></li>
</ul>
&nbsp;

&nbsp;
<ul>
 	<li><a tabindex="3" href="#">Yazılım</a></li>
</ul>
&nbsp;

&nbsp;
<ul>
 	<li><a tabindex="4" href="#">Donanım</a></li>
</ul>
&nbsp;

&nbsp;
<ul>
 	<li><a tabindex="6" href="#">Bağlantılar</a></li>
</ul>
&nbsp;

&nbsp;

</div>