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>*/
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>
-->
<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:
No comments:
Post a Comment