Bu dersimizde CSS ile açıklamalı bir menü yapmayı öğreneceğiz.





Html Kodu:

<div id="menu">
  <ul>
    <li><a href="#">Anasayfa<span>Sitenin Bütün İçerik Linkleri Bu sayfada</span></a></li>   
    <li><a href="#">Sanalkurs Forum<span>Forum Bölümümüzden Bilgi Paylaşım Yapabilirsiniz</span></a></li>
    <li><a href="#">Müzik<span>Müzik Bölümümüz Her Türlü Full Albüm</span></a></li>
    <li><a href="#">Video<span>Video İçeriği</span></a></li>
  </ul></div>

Css Kodu:

/* Menu Div CerveVe bicimi */
#menu {
	float:left;
	width:150px;
	}

/* Menu içindeki Liste EtiketLerini Bicimlendirme */
#menu li, #menu ul {
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	list-style:none;
	text-align:left;
		}
/* Menu Liste içinDeki LinKleri Biçimlendirme */
#menu li a {
	padding:8px 0px 0px 20px;
	font-family:"Comic Sans MS";
	font-size:13px;
	text-decoration:none;
	color:#FFFFFF;
	background:url(buttona2.gif) no-repeat;
	width:130px;
	height:32px;
	display:block;
	}
/* Menu Liste içinDeki LinKleri Fare İmleci Üzerinde İken Biçimlendirme */
#menu li a:hover {
	background:url(buttonahover2.gif) no-repeat;
	font-size: 80%; /* IE5.x/Win duzeltmek icin  Desteklemeyen İE Serisini için Çözüm*/

	}
/* Menu Linkelere Eklenmiş Span Etiketi İçerğini İlk Sayfada Gizleme */
#menu li a span {
	display:none;
	}
/* Menu Linkelere Eklenmiş Span Etiketi İçerğini Fare Hareketi İle Gösterme */
#menu li a:hover span {
	display:block;
	position:absolute;
	top:auto;
	left:160px;
	background:#000066;
	font-family:"Comic Sans MS";
	border:solid #0033FF 1px;
	width:200px;
	}

CSS içine başlıklar koyarak açıkladım. Umarım işinize yarar.