Cara Membuat Menu Dropdown

Cara Membuat Menu Dropdown, Untuk mempercantik tampilan atau design blog kita, tentu kita harus banyak mencari trik-trik blog termasuk salah satunya Cara Membuat Menu Dropdown, dengan menu dropdown kita bisa mengelompokkan beberapa atau banyak kategori-kategori dalam satu Menu dan Cara Membuat Menu Dropdown juga akan mempermudah pengunjung blog untuk membaca artikel-artikel blog kita lainya.

Cara Membuat Menu Dropdown, banyak para blogger yang memposting artikel Cara Membuat Menu Dropdown tapi banyak pula para blogger lainnya kesulitan atau tidak berhasil untuk menerapkan di blog nya termasuk Saya sendiri hehehe karena cara yang di gunakan kebanyakan dengan cara edit HTML. Cara Membuat Menu Dropdown,  nah kali ini Saya akan menyajikan kayak makanan aja di sajikan hehehe Cara Membuat Menu Dropdown yang mudah di gunakan dan keren dengan cara menambah kan GADGET, namun ini juga bisa di pasang pada HTML template sobat dengan cara mengedit HTML tapi itu sulit kadang-kadang berhasil kadang-kadang tidak, untuk Template blog saya sendiri memang dengan cara mengedit HTML Template, untuk sobat semua Saya anjurkan dengan cara menambahkan GADGET aja, karena HTML masing-masing blog kita kebanyakan berbeda-beda takutnya nanti sobat akan menemui kesulitan dalam mengeditnya. OK langsung saja, saatnya action hehehe:

1. Cara Membuat Menu Dropdown, Masuk ke Tata Letak blog sobat
2. Cara Membuat Menu Dropdown, Pilih tambahkan gadget, tentunya pilih gadget yang paling atas
3. Cara Membuat Menu Dropdown, Pilih HTML/JavaScript
4. Cara Membuat Menu Dropdown, Copy seluruh kode HTML di bawah ini
5. Cara Membuat Menu Dropdown, Paste kan pada gadget yang di tambah kan tadi
6. Cara Membuat Menu Dropdown, Untuk kode yang berwarna merah, itu adalah warna background menu nya silahkan sobat ganti dengan kode warna yang sobat inginkan
7. Cara Membuat Menu Dropdown, Untuk kode yang berwarna kuning dan tanda pagar silahkan sobat ganti dengan alamat/url artikel sobat sendiri yang sobat inginkan
8. Cara Membuat Menu Dropdown, Untuk kode yang berwarna biru ganti dengan judul dari alamat artikel tersebut
9. Cara Membuat Menu Dropdown, Hasil nya seperti gambar yang di atas

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:-webkit-gradient(linear, left top, left bottom, from(#FFFF00), to(#FF0000));margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:0px solid #156994;}

#cat-nav a:hover { color:#7FFF00; }

#cat-nav li:hover { background:-webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#7FFF00; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#4B0082; }

#secnav a { font-family:Calibri, &quot;Comic Sans MS&quot;, Times, serif; font-style:none; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li  { height:30px; border-top:1px solid #fff; }

#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:12px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul  { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover  { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='http://suaradaqwah.blogspot.com/'>MANAGER</a>

<ul id='sub-custom-nav'>

<li><a href='https://plus.google.com/101007907515578417447/about'>E-Mail</a></li>

<li><a href='https://www.facebook.com/Hend.Linggo'>Facebook</a></li>

<li><a href='https://twitter.com/Hendry_GM'>Twitter</a></li>

</ul>

</li>

<li><a href='http://suaradaqwah.blogspot.com/'>ISLAM</a>

<ul id='sub-custom-nav'>

<li><a href='http://suaradaqwah.blogspot.com/2014/06/rukun-islam.html'>Rukun Islam</a></li>

<li><a href='http://suaradaqwah.blogspot.com/2014/06/rukun-iman.html'>Rukun Iman</a></li>

<li><a href='#'>Belum ada judul 3</a></li>

<li><a href='#'>Belum ada judul 4</a></li>

<li><a href='http://suaradaqwah.blogspot.com/2014/06/keutamaan-membaca-al-quran.html'>Al-Qur&#39;an</a></li>

<li><a href='#'>Belum ada judul 6</a></li>

</ul>

</li>

<li><a href='http://suaradaqwah.blogspot.com/'>KATA-KATA TERBAIK</a>

<ul id='sub-custom-nav'>

<li><a href='http://suaradaqwah.blogspot.com/2014/06/kata-kata-motivasi_18.html'>Kata-Kata Motivasi</a></li>

<li><a href='http://suaradaqwah.blogspot.com/2014/06/nasehat-islam.html'>Nasehat Islami</a></li>

<li><a href='#'>Belum ada judul 3</a></li>

<li><a href='#'>Belum ada judul 4</a></li>

<li><a href='#'>Belum ada judul 5</a></li>

<li><a href='#'>Belum ada judul 6</a></li>

</ul>

</li>

<li><a href='#'>MENU MASIH KOSONG</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Belum ada judul 1</a></li>

<li><a href='#'>Belum ada judul 2</a></li>

<li><a href='#'>Belum ada judul 3</a></li>

<li><a href='#'>Belum ada judul 4</a></li>

<li><a href='#'>Belum ada judul 5</a></li>

</ul>

</li>

<li><a href='#'>TEMPLATE</a></li>

</ul>

</div>

"Cara Membuat Menu Dropdown"

Selamat mencoba ya sahabat blogger semua semoga berhasil