Merhaba arkadaşlar,
Bugün yatay menü yapımını anlatacağım, çalışma sonucu aşağıdaki gibi olacak.
Öncelikle div yapısını ve listelemeyi paylaşıyorum.
<div id="menualani"> <ul> <li><a href="#"> Anasayfa</a></li> <li><a href="#">Videolar</a></li> <li><a href="#">Makaleler</a></li> <li><a href="#">Yazarlar</a></li> <li><a href="#">İçerik Talep Et</a></li> <li><a href="#">Destek</a></li> <li><a href="#">İletişim</a></li> </ul> </div>
gerekli css.
<style type="text/css"> /*menümüzün genişlik ve yüksekliğini belirliyoruz.*/ #menualani { background-color: #09C; height: 35px; width: 840px; } #menualani ul { margin: 0px; padding: 0px; } /*herbir menü alanımız için genişlik belirliyoruz.*/ /*yanyana sıralanması için float: left diyoruz.*/ #menualani ul li { float: left; width: 120px; list-style-type: none; } /*textimiz için font renk vs seçiyoruz. display block demezseniz sadece yazının üzerine gelince seçim yapmış olursunuz block diyerek yazıyı li ile belirlediğimiz alana sabitliyoruz.*/ #menualani ul li a { line-height: 35px; font-family: Tahoma; color: #FFF; text-decoration: none; text-align: center; display: block; border-right-width: 1px; border-right-style: solid; border-right-color: #06C; font-size: 14px; } /* mouse menü alanımızın üstüne gelince renginin değişmesi için.*/ #menualani ul li a:hover { background-color: #F63; } </style>