Membuat Drop Down Menu Sederhana

Sekarang kita akan belajar untuk membuat code dropdown menu, code ini bisa agan pakai sebaai navigasi, kali ini kita tidak akan berkonsentrasi untuk mendesign menu tersebut, jadi kali ini kita hanya akan belajar membuat code HTML dan CSS untuk menunya itu sendiri, agan bisa mengembangkan code ini untuk keperluan yang lebih luas, dan tampilan yang lebih elegant sesuai keinginan.

Berikut code yang kita butuhkan untuk membuat dropdown menu sederhana :

1. code untuk HTML

 
<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>
<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>
<li><a href="#">Menu 3</a>
</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>
<li>
<a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu 5</a>
</li>
</ul>

1. code CSS Drop Down Menu

/*Initialize Menu Utama*/
ul #menu, ul #menu ul.sub-menu {
padding:0;
margin: 0;
}
ul #menu li, ul #menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}

/*Link untuk Menu Utama*/
ul #menu li a, ul #menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}

/*Membuat menu utama dari sub-menu jadi relative*/
ul #menu li {
position: relative;
}

/*ini untuk sub menu*/
ul #menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
ul #menu li:hover ul.sub-menu {
display:block;
}

Bila kita mengarahkan mouse pada Menu2 dan Menu4, maka sub-menu yang tidak terlihat akan muncul, effect dari code saat mouse kita arahkan disebut hover dan untuk menyembunyikan suatu code html dengan CSS cukup memakai code display:none. Sepertinya tidak sulit untuk membuat code drop down menu. OK see you next time ^_^ <== sok pakai bahasa linggis gan -_-'

---

---