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;
}