Menu Drop Down Sederhana Tanpa JavaScript

kali ini saya akan menjelas kan gimana cara membuat menu drop down sederhana tanpa javascript , terkadang kita mencari gimana cara membuat dropdown kebanyakan menggunakan platform dari javascript , nah kali ni kita cukup menggunkan HTML/CSS only.

sekalipun anda tidak mengaktifkan javascript pada browser, dropdown ini sudah pasti tetap berjalan karena yang kita gunakan hanyalah kode CSS dan HTML. kalau dinilai dari sisi besar-kecilnya source, maka dengan cara sederhana ini kapasitasnya akan lebih kecil dan pengkasesnya lebih cepat dibandingkan menggunakan javascript.

langsung saja kita mulai
langkah awal kita harus membuat susunan menu .
Buat File Menu.html , kemudian tulis kode dibawah ini .

<link href="style.css" rel="stylesheet"> <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 -->
maka jika dibuka akan terlihat tampilan seperti ini

kenapa terlihat seperti itu ?, kok tidak dropdown ..? 

iya itu baru tampilan dari susan menu html saja. karena kita belum memasukkan script CSS nya.

langkah selanjutnya kita harus membuat style dari menu tersebut , 

buatlah File dengan nama Style.css , dan di isi dengan style dibawah ini

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 }
maka akan tampil menu seperti contoh demo dibawah ini

• Menu 1
• Menu 2
  • Sub Menu 1
• Menu 3
  • Sub Menu 1
  • Sub Menu 2
• Menu 4
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
• Menu 5
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
  • Sub Menu 4