<style>
.menucuk{
width: 250px; /*Menü Genişliği*/
height: auto; /* Yükseklik Otomatik (Değiştirmeyin)*/
background: #f0eeee; /*Arkaplan Rengi*/
border: 1px solid #cecece; /*1px kalınlığında düz çizgili(solid), #cecece renginde bir çerçeve*/
float: left; /*Sola dayalı olacak.*/
margin-bottom: 15px; /*Menünün altına birşey eklerseniz Menünün 15px altından boşluk bırakarak başlar*/
}
.menucuk ul {
display: block; /*Kutucuklu olsun*/
margin: 0px; /*Dıştan bırakılan boşluk*/
padding: 0px;/*İçten bırakılan boşluk*/
}
.menucuk ul li {
padding-left: 2px; /*Sol içten 2px boşlukla başlayacak.*/
padding-top: 2px; /* Üst içten 2px boşlukla başlayacak*/
padding-bottom: 2px; /*alt içten 2px boşlukla başlayacak*/
list-style: none; /*Liste numaralandırması olmasın (Yuvarlak, kare vs.)*/
}
.menucuk ul li a {
font-family: Arial, Helvetica, sans-serif; /*Linklerin yazı tipi*/
font-size: 12px; /*Linklerin boyutu*/
color: #3a3a3a; /* Link rengi*/
background: url(http://img.webme.com/pic/m/mikro-blog/menu_icon.png) no-repeat center left; /*Arkaplan rengi ve resmi*/
text-decoration: none; /*Yazının altındaki çizgiyi kaldırma*/
display: block; /*kutucuk*/
padding-left: 20px; /*Sol içten 20px boşluk*/
padding-top: 8px; /*Üstten 8px boşluk*/
padding-bottom: 8px; /*Alttan 8px boşluk*/
font-weight: bold; /*Yazı kalın olacak*/
}
.menucuk ul li a:hover { /*Linkin üzerine gelince değişen renk, resim*/
display: block; /*kutucuk*/
background-color: #e9e8e8; /*arkaplan rengi*/
}
</style>
<div class="menucuk">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımda</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Ziyaretçi Defteri</a></li>
</ul>
</div>
