HTML:
Menu Deneme
Bir dosya daha oluşturup menu.css diye kayıt edin.
HTML:
body #menu ul #menu ul li #menu ul li a #menu ul li a:hover
CSS dosyasını oluştururken ilk once
body ile sayfamızın yazı fontunu ve yazı buyukluğu ayarladık.İstersek bunu a ve a:hover etiketleri icindede tanımlaya bilirsiniz.
body
Listemizin onundeki noktaları iptal etmek icin ul etiketi icindeki noktaları aşağıdaki kodu yazıyoruz.
#menu ul
ul etiketi icindeki li etikerlerini block bicimi alması icin display:block; yazıları ortalamak icin text-align:center; li nin genişliği icinde width:100px; yazıyoruz.
#menu ul li
a yani link etiketimiz icinde renk belirliyoruz site acıldığında linklerin rengi color:yellow; linklerin uste yapışık cıkmaması icin padding:10px 0px 0px 0px;
altındaki cizgiyi kaldırmak icin text-decoration:none; yuksekliğini belirtmek icin height:30px; arkaplan rengi icin background-color:red; block şeklini alması icin display:block; kullanıyoruz.
#menu ul li a
ustune geldiğinde renklerin değişmesi icin color:red; renkleri değiştiriyoruz text-decoration:underline; yazıların altını ciziyoruz background-color:yellow; arkaplan resmini değiştiriyoruz display:block; şeklinde gorunyuluyoruz.
#menu ul li a:hover
menulerin soldan sağa doğru sıralanması icin float:left; kodunu #menu ul li icerisine ekliyoruz.
#menu ul li
menulerin sağdan sola doğru sıralanması icin float:right; kodunu #menu ul li icerisine ekliyoruz.
#menu ul li
Alıntı