Pada postingan kali ini saya akan membahas tentang menu dropdown, menu dropdown adalah menu yang memiliki sub sub menu sehingga memudahkan pengunjung dalam mencari isi artikel anda,
cara membuatnya cukup mudah,ada dua cara dalam membuat menu dropdown yaitu memlalui template dan melalui widget/sidebar. namun kali ini saya akan membahas memnuat menu dropdown melalui widget
Berikut langkah"nya
1.Masuk ke nlogger anda
2.Pilih tataletak
3.Klik tambah gadget
4.Pilih hatml/ javascript
5. copy code dibawah ini
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; 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:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; 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:11px; 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='
url anda'>
Home</a></li>
<li><a href='
url anda'>
Menu 1</a></li>
<li><a href='
url anda'>
Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a href='
url anda'>
Sub Menu 1</a></li>
<li><a href='
url anda'>
Sub Menu 2</a></li>
<li><a href='
url anda'>
Sub Menu 3</a></li>
</ul>
</li>
<li><a href='
url anda'>
Menu</a></li>
<li><a href='
url anda'>
Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='
url anda'>
Sub 1</a></li>
<li><a href='
url anda'>
Sub 2</a></li>
<li><a href='
url anda'>
Sub 3</a></li>
<li><a href='
url anda'>
Sub 4</a></li>
<li><a href='
url anda'>
Sub 5</a></li>
<li><a href='
url anda'>
Sub 6</a></li>
</ul>
</li>
<li><a href='
url anda'>
Menu</a></li>
6.Ganti tulisan yang berwarna biru dengan url kategori/sub kategori anda,
7.Ganti tulisan yang berwarna hijau dengan judul kategori menu anda,
8.Ganti tulisan yang berwarna ungu dengan sub kategori anda.
klik simpan dan lihat apa yang terjadi,
sekian dulu postingan dari saya apabila ada kesalahan dalam penulisan mohon dimaklumi.
semoga bermanfaat untuk anda.
