Cara Mudah Membuat Dropdown Menu Menggunakan CSS untuk Web Template

Setelah melakukan blogwalking, ada beberapa template blog yang sangat menarik perhatian saya, yaitu dorpdown menu.
Setelah saya pelajari bagaimana membuat dropdown menu, berikut akan saya jelaskan secara gamblang bagaimana membuat dropdown menu yang paling sederhana.
OK kita ikuti langkah-langkah nya setahap demi setahap.

1. Buat lah konsep sederhana menu apa saja yang akan di tampilkan, sebagai contoh saya akan membuat menu1 dan menu2  pada masing-masing saya akan membuat submenu11 dan submenu12 untuk menu1 juga submenu21 dan submenu22 untuk menu2.
2. Gunakan HTML Editor dan untuk membuat menu kita gunakan tag <ul> dan <li>, seperti hasil sebagai berikut:
   <ul> <li>menu1 <ul> <li>submenu11</li> <li>submenu12</li> </ul> </li> <li>menu2 <ul> <li>submenu21</li> <li>submenu22</li> </ul> </li> </ul>
3. Buat tag <style> sebelum tag <ul> dan isi untuk selector ul li dengan property float:left untuk merapatkan output ke sebelah kiri
   <style> ul li{ float:left; position:relative; } </style> <ul> <li>menu1 <ul> <li>submenu11</li> <li>submenu12</li> </ul> </li> <li>menu2 <ul> <li>submenu21</li> <li>submenu22</li> </ul> </li> </ul>
4. Buat selector dengan yang baru untuk il ul dengan property display:none untuk menyembunyikan submenu.
   <style> ul li{ float:left; position:relative; } li ul{display:none} </style> <ul> <li>menu1 <ul> <li>submenu11</li> <li>submenu12</li> </ul> </li> <li>menu2 <ul> <li>submenu21</li> <li>submenu22</li> </ul> </li> </ul>
5. Buat selector dengan yang baru untuk il:hover ul dengan property display:block dan position:absolute untuk menampilkan submenu yang tersembunyi saat cursor berada di atas menu. Silahkan pindahkan cursor ke atas menu1 atau menu2 dan hasilnya jreng...... muncul submenu saat cursor di atas menu.
   <style> ul li{ float:left; position:relative; } li ul{ display:none; } li:hover ul{ display:block; position:absolute; } </style> <ul> <li>menu1 <ul> <li>submenu11</li> <li>submenu12</li> </ul> </li> <li>menu2 <ul> <li>submenu21</li> <li>submenu22</li> </ul> </li> </ul>

Itulah semua konsep dasar dari pembuatan Dropdown Menu sedangkan untuk style yang lain seperti warna background, warna text, dan style lainya silahkan baca artikel-artikel di blog ini
Selamat mencoba