<link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="menu-bar" lang="tr">
        <ul>
            <li class="active"><a href="#"><i class="fas fa-home"></i> Anasayfa</a></li>
            <li><a href="#"><i class="fas fa-address-card"></i> Kurumsal</a>
              <div class="sub-menu-1">
                    <ul>
                        <li>Hakkımızda</li>
                        <li>Tarihçe</li>
                        <li>Vizyonumuz ve Misyonumuz</li>                             <li>Duyurular</li>
                        <li>Yönetim Kurulu</li>
                    </ul>
                </div>
            </li>
            <li><a href="#"><i class="fas fa-handshake"></i> Yatırımcı İlişkileri</a></li>
            <li><a href="#"><i class="fas fa-file-invoice"></i> Hizmetlerimiz</a></li>
            <li><a href="#"><i class="fas fa-hand-holding-usd"></i> Bayilik Sistemi</a></li>
            <li><a href="#"><i class="fas fa-phone-volume"></i> 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: 200px;
    margin: 5px;
    padding: 10px;
    text-transform: uppercase;
    font-size: small;
}

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

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

.menu-bar .fas{
    margin-right: 8px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.