Açılır Menü Çubuğu

• Aşağıda insagramda paylaşmış olduğum “Açılır Menü Çubuğu” gönderisin kodları bulunmaktadır.
• İnsagram gönderisine ulaşmak için buraya tıklayın.
• Ayrıca gönderilerin devamı için beğenmeyi unutmayın.
• Kodlarla ilgili sorunlar çıkması durumda www.mekyazilim.com/iletisim kısmından bize ulaşabilirsiniz.

HTML KODLARI

  <ul>
        <li>
            <a class="menu-icon" href="#"><i class="fas fa-bars"></i></a>
            <ul class="hidden">
                <li><a href="#"><i class="fas fa-user"></i> Hesabım</a></li>
                <li><a href="#"><i class="fas fa-shopping-basket"></i> Siparişler</a></li>
                <li><a href="#"><i class="fas fa-cog"></i> Ayarlar</a></li>
            </ul>
        </li>
    </ul>

CSS KODLARI

ul {
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
    }

    li {
        display: inline-block;
        float: left;
        margin-right: 1px;
    }


    li a {
        display: block;
        background: #2f3036;
        min-width: 55px;
        color: #fff;
        text-decoration: none;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    }

    .menu-icon {
        font-size: 30px;
    }

    li:hover ul a {
        background: #f3f3f3;
        color: black;
        height: 45px;
        line-height: 40px;
    }

    li:hover ul a:hover {
        background: #3b3192;
        color: #fff;
    }

    li ul li a {
        text-align: left;
        min-width: 100px;
        padding: 0 25px;
    }

    li ul {
        display: none;
    }

    ul li a:hover+.hidden,
    .hidden:hover {
        display: inline-block;
    }