<link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@700&display=swap" rel="stylesheet">
<div class="menu-bar" lang="tr">
        <ul>
            <li class="active"><a href="#">Anasayfa</a></li>
            <li><a href="#">Kurumsal</a></li>
            <li><a href="#">Yatırımcı İlişkileri</a></li>
            <li><a href="#">Hizmetlerimiz</a></li>
            <li><a href="#">Bayilik Sistemi</a></li>
            <li><a href="#">Bize Ulaşın</a></li>
        </ul>
</div>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-image: url(https://bit.ly/2YwkbLu);
    background-size: cover;
    font-family: 'MuseoModerno', cursive;
}

.menu-bar{
    background-color: #524120;
    text-align: center;
}

.menu-bar ul{
    display: inline-flex;
    list-style: none;    
}

.menu-bar ul li{
    width: 220px;
    margin: 5px;
    padding: 10px;
    text-transform: uppercase;
}

.menu-bar ul li a{
    text-decoration: none;
    color:wheat;
}

.active, .menu-bar ul li:hover{
    background-color: #6D5E43;
    border-radius: 3px;
} 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.