<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;
    cursor: pointer;
}

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

.sub-menu-1{
    display: none;
    color: wheat;
}

.menu-bar ul li:hover .sub-menu-1{
    display: block;
    position: absolute;
    background-color: #524120;
    margin-top: 10px;
    margin-left: -10px;
}

.menu-bar ul li:hover .sub-menu-1 ul{
    display: block;
    margin: 10px;
}

.menu-bar ul li:hover .sub-menu-1 ul li{
    width: 170px;    
    border-bottom: 1px dashed wheat;   
    text-align: left;    
}

.menu-bar ul li:hover .sub-menu-1 ul li:last-child{
    border-bottom: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.