Menu Drop Down Sederhana Dengan CSS

Cara ini adalah yang paling mudah untuk membuat menu dropdown tanpa kode javascript, kita membuat menu dropdown ini cukup dengan kode CSS, tentunya dengan sedikit ngetrik.

Sekalipun kita tidak mengaktifkan javascript pada browser, dropdown ini sudah pasti tetap berjalan karena yang kita gunakan hanyalah kode CSS dan HTML, dengan cara sederhana ini kapasitasnya akan lebih kecil dan pengaksesannya lebih cepat dibanding menggunakan javascript.

Berikut kode untuk membuat menu Dropdown dengan kode CSS sederhana;

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:#252585;
 background:#CCCCFF;
 padding:5px;
 display:block;
}

ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
 background:#A4A4FC;
}

ul#menu li {
 position:relative;
}

ul#menu li ul.sub-menu {
 position: absolute;
 top:30px;
 display:none;
}

ul#menu li:hover ul.sub-menu {
 display:block;
}

Jika kita ingin menambahkan kode css di atas pada blogger copy dan pastekan di atas kode ]]></b:skin>

Berikut ini adalah untuk link navigasinya, kodenya seperti dibawah ini;

<ul id="menu">
 <li><a href="#">Menu 1</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
  </ul>
 </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>
  </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>
   <li><a href="#">Sub Menu 3</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>
   <li><a href="#">Sub Menu 4</a></li>
  </ul>
 </li>
</ul>

Ganti karakter '#' dengan alamat url yang kita kehendaki, dan untuk mengaplikasikan pada blogger, pilih menu Tata Letak > Tambahkan Gadget > pilih HTML/JavaScript;

Pilih gadget HTML/JavaScript;

Masukkan kode diatas dan klik tombol simpan, kemudian lihat blog, maka hasilnya akan seperti dibawah ini,

Demo :

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

Monggo silakan dicoba di blog masing-masing, apabila sampeyan tertarik

Pengelola Blog

Zainoel Arifin Isa'i : Penulis Blog. Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas yang bermarkas di sudut kamar belakang rumah di daerah pelosok desa terpencil lereng Gunung Arjuno.

Machfudz Arif : Teknisi Blog. Pekerjaan sebagai Web and Mobile App Developer yang bermarkas di Lembah Tlogo Krabyaan di sebuah dusun yang dikelilingi perbukitan nan elok dan berudara segar.