Membuat Drop Down Menu dengan HTML

Membuat dropdown menu dengan HTML lebih mudah dengan membuat menu dengan jquery seperti pada tutorial yang lalu, bingung?lihat dulu Horisontal Menu Navigasi untuk lebih memahaminya. atau jika sudah paham langsung pada contoh berikut.



Liatlah gambar diatas, jika berminat langsung copy paste kode dibawah ini pada widget template anda, caranya :

• Login ke Blogger anda;


• Pilih Add a Gadget atau Add a Page element;


• Tambahkan kode HTML/JavaScript widget;


• Copy paste kode dibawah;


• Klik Save

<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Oke sampai disini dulu tutorial kali ini, selamat mencoba.
Semoga bermanfaat bagi anda semua dan jangan lupa komentarnya ya.....