Informasi Teknologi dan Security

Friday, April 3, 2020

Cara membuat Drop Down dengan html dan css


yoo kawan-kawan Otaku-It disini mimin mau share cara membuat Dropdown dengan menggunakan html dan css. Kalo bingung apa sih drop down itu? misal temen-temen mengunjungi sebuah website dan ketika temen-temen menghover sebuah menu dan menunya menampilkan sebuah sub menu, itu merupakan drop down nah disini kita akan membuat simplenya seperti berikut:

css code
/*<style>
    body{
        margin: 0;
        padding: 0;
    }
    .menu_{
        position: relative;
    }
    .menu_:hover .container_sub{
        display: block;
    }
    .menu_>span{
        background: aqua; 
        padding: 1%;
        display: inline-block;
    }
    .container_sub{
        display: none;
        position: absolute;
    }
    .submenu{
        width: 100px;
        height: 30px;
        color: white;
    }
    .submenu.one{
        background: pink;
    }
    .submenu.two{
        background: yellowgreen;
    }
    .submenu.tree{
        background: plum;
    }
</style>*/

HTML code
<--
<span class="menu_">
    <span>Menu</span>
    <div class="container_sub">
        <div class="submenu one">Sub 1</div>
        <div class="submenu two">Sub 2</div>
        <div class="submenu tree">Sub 3</div>
    </div>
</span>
-->

#nb hapus comment jika ingin menggunakan code diatas
berikut merupakan contoh hasil dari code diatas:
Menu





No comments:

Post a Comment