Css ile bunu nasıl yapabilirim ?

Hocam simgeler ile yazıların öyle kötü gözükmemesi için demiştim. Elimde şu kod mevcut yan yana için

HTML


<ul> <li><a class="aktif" href="#index">Ana sayfa</a></li> <li><a href="#hakkımızda">Hakkımızda</a></li> <li><a href="#urunler">Ürünler</a></li> <li><a href="#referanslar">Referanslar</a></li> <li><a href="#iletisim">İletişim</a></li> </ul>

CSS

ul {
list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #27ae60;
}

li {
float: left;
}

li a {
display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;
}

li a:hover:not(.active) {

background-color: #111;
}

.active {

background-color: #f39c12;
}

gönderdim üstadım teşekkür ederim

sağol hocam şunu bi araştırayım

Kardeşim sen çok yanlış tasarlamışsın zaten. Sağda bak gösterdim yerini. Olay şu böyle bir itemda dwopdown classı kullanamazsın. li için de kullanman lazım. Yani componentleri uyduyorsun şuan burayı düzeltsek başka yerde patlayacaksın. Ayrıca resim yazı kaymasının sebebide linke backgroun vermişsin oda doğru değil onu çözmek içinse ekstra işlem yapmak gerek. bunun için de li>a>span için margin-left vermen gerekecek. ama bunlar amatör çözümler. dediğim gibi yapıyı çok yanlış kurmuşsun

teşekkür ederim bende yazmadınız sandım şimdi gördüm o halde komple orayı dağıtıp baştan tasarlayım böyle olmayacak yoksa düzeltirim diye diye iyice bozduk

Aynen anasayfan yan sayfan aslında site komple bozuk olmamış bu baştan yap

daha neler