Aciklamali Menu

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





Html Kodu:

<div id="menu"> <ul> <li><a href="#" _fcksavedurl="#">ChildClub<span>Sitenin Bütün İçerik Linkleri Bu sayfada</span></a></li> <li><a href="#" _fcksavedurl="#">Child Sanal Kurs<span>Sanal Kurs</span></a></li> <li><a href="#" _fcksavedurl="#">PhotoShop<span>PhotoShop</span></a></li> <li><a href="#" _fcksavedurl="#">Flash<span>Flash İç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; }