Html Kodu
Css Kodu
- Kod:
<ul class="menu"> <!-- Menu Begin --> <li> <a href="http://www.hyperend.tr.gg" _fcksavedurl="http://www.hyperend.tr.gg"> <img src="http://img.webme.com/pic/h/hyperend/user.png" _fcksavedurl="http://img.webme.com/pic/h/hyperend/user.png" alt="user.png"> <span class="name">Ana Sayfa</span> <span class="description">açıklama buaraya gelecektir.</span> </a> </li> <li> <a href="http://www.hyperend.tr.gg/defter.htm" _fcksavedurl="http://www.hyperend.tr.gg/defter.htm"> <img src="http://img.webme.com/pic/h/hyperend/comment.png" _fcksavedurl="http://img.webme.com/pic/h/hyperend/comment.png" alt="comment.png"> <span class="name">Ziyaretci Def.</span> <span class="description">açıklama buaraya gelecektir.</span> </a> </li> <li> <a href="http://www.hyperend.tr.gg/about.htm" _fcksavedurl="http://www.hyperend.tr.gg/about.htm"> <img src="http://img.webme.com/pic/h/hyperend/print.png" _fcksavedurl="http://img.webme.com/pic/h/hyperend/print.png" alt="print.png"> <span class="name">Hakkımızda</span> <span class="description">açıklama buaraya gelecektir.</span> </a> </li> <li> <a href="http://www.hyperend.tr.gg/destek.htm" _fcksavedurl="http://www.hyperend.tr.gg/destek.htm"> <img src="http://img.webme.com/pic/h/hyperend/edit.png" _fcksavedurl="http://img.webme.com/pic/h/hyperend/edit.png" alt="edit.png"> <span class="name">Destek OL!</span> <span class="description">açıklama buaraya gelecektir.</span> </a> </li> </ul> <!-- Menu End -->
Css Kodu
- Kod:
.menu , .menu ul { width:202px; margin:auto; padding:5px; list-style-type: none; overflow:hidden; border:1px solid #eee; } .menu li { float:left; position:relative; } .menu li img { float:left; margin: 5px 0 0 5px; border:none; } .menu li a .name { float:left; width:166px; margin:0 0 0 5px; font-weight:bold; font-size:0.7em; cursor:pointer; } .menu li a:active, .menu li a:focus { outline:0; } .menu li a .description{ float:left; width:161px; margin:-5px 0 0 5px; font-weight:normal; font-size:0.7em; cursor:pointer; } .menu li a:link, .menu li a:visited { height:35px; font-size:1em; color:#000; text-decoration:none; line-height:20px; border:1px solid #fff; display:block; font-weight:bold; } .menu li a:hover { background:#eee; }