Hallo Sob!!!
kali ini saya mau berbagi cara membuat menu drop down sederhana menggunakan HTML dan CSS
silahkan di siimak ya sobat Blogger
Berikut kode untuk membuat menu Dropdown tersimpel bahkan tergampang sedunia :
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin:0;
text-align:center;
opacity:.9
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type:none;
display:inline-block;
width:120px
}
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration:none;
color:#fff;
background:#666;
padding:5px;
display:block
}
ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
background:#333
}
ul#menu li {
position:relative
}
ul#menu li ul.sub-menu {
position: absolute;
top:30px;/* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */display:none
}
ul#menu li:hover ul.sub-menu {
display:block
}
<ul id="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 5</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
</ul>
<!-- tanda # ganti dengan alamat URL yang sobat inginkan -->
Contohnya :
Silakan dicoba di website masing-masing. Jika ingin menggunakan menu dropdown ini pada Blogger, maka kode CSS diletakkan pada bagian dalam <b:skin><
0 comments:
Post a Comment