Menü item düzenleme

CSS
1

Merhaba,

Ekran Alıntısı
Ekran Alıntısı1285×537 2.1 KB

Şöyle basit bir menü yaptım. Ben bu menüde “İletişim” iteminin arka planını beyaz yapmak istiyorum. Ama sadece “İletişim” de olacak. Bunu nasıl yapabilirim?

Şöyle bir kod yaptım ama olmadı:

<div class="menu">

        <ul>

            <div class="iletisim">

                <li><a href="#">iletişim</a></li>

            </div>

            <li><a href="#">Ana Sayfa</a></li>

            <li><a href="#">Ana Sayfa</a></li>

            <li><a href="#">Ana Sayfa</a></li>

            <li><a href="#">Ana Sayfa</a></li>

        </ul>

    </div>

.menu ul {

    list-style-type: none;

    overflow: hidden;

    padding: 20px;

    font-weight: 500;

    font-size: 15px;

}

.menu li {

    float: right;

    padding: 15px;

}

.menu a {

    font-style: none;

    color: #5865f2

}

.iletisim {
    background-color: white;
}
2 
background-color: white !important;
3 
<div class="menu">

        <ul>

            <li class="iletisim"><a href="#">iletişim</a></li>

            <li><a href="#">Ana Sayfa</a></li>

            <li><a href="#">Ana Sayfa</a></li>

            <li><a href="#">Ana Sayfa</a></li>

            <li><a href="#">Ana Sayfa</a></li>

        </ul>

    </div>

.menu ul {

    list-style-type: none;

    overflow: hidden;

    padding: 20px;

    font-weight: 500;

    font-size: 15px;

}

.menu li {

    float: right;

    padding: 15px;

}

.menu a {

    font-style: none;

    color: #5865f2

}

.iletisim {
    background-color: white;
}

body{
  background-color:black
}

neden iletisim kismini ayri bir div icine aldiginizi anlayamadim bu sekilde is gorur bence