Cara Membuat Navigasi Horizontal Drop Down

Tanpa basa-basi, kita langsung ke pokok pembahasan aja ya...takut keburu puyeng ;p. Untuk membuat Navigasi Menu Drop Down caranya seperti di bawah ini:

1. Edit HTML

2. Klik Expand Template Widget

3. Download Template Lengkap untuk menghindari kesalahan

4. Copy kode beikut lalu simpan tepat di atas kode <div id='content-wrapper'>

<div id='Menumainwrapx'>
<b:section id='NavbarMenux'>
<b:widget id='HTML50' locked='false' title='MembuatMenu' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div> <!-- End Menumainwrapx -->
<div class='clear'/>

5. Setelah itu Copy kode berikut lalu simpan tepat di atas kode ]]></b:skin>

#Menumainwrapx {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ7agg7yFrY-vm8JfMkpxqJQ4ZapWNX52nY67h4wOvuhaqmS9dHNPaTnpbz6iajyEFOuKh0UCLwRv2Uq5dwOs1boBPgMHGemICnMDARtq4xwFGX5_Wz0TbaQT6J5KtHEJDzSrxkagn2Vk/s1600/topnavks.jpg) repeat-x scroll 0 0 #222222;
border-bottom:1px solid #CCCCCC; 
height:42px;
margin:0;
padding:0;
}
#NavbarMenux {
width: 950px;
height: 41px;
font-size: 13px;
color:#333333;
margin: 0px;
padding: 0;
font-weight:bold;
font-family:arial;
margin: 0 auto;
}
#NavbarMenuleftx {
width: 950px;
margin: 0;float:left;}
#navx { margin: 0;
padding: 0; }
#navx ul {
float: left;
list-style: none;
margin: 0;
padding: 0; }
#navx li {
list-style: none;
margin: 0px;
padding: 0; }
#navx li a,
#navx li a:link,
#navx li a:visited {
height: 22px;
color: #333333;
display: block;
font-size: 13px;
text-decoration: none;
margin: 0;
padding:10px 13px 9px 13px;
border-right: 1px solid #CFCFCF; }
#navx li a:hover,
#navx li a:active {
color: #333;
margin: 0;
text-decoration: none;
background:#F0F0F0;
}
#navx li li a, #nav li li a:link,
#navx li li a:visited {
background:url(http://farm2.static.flickr.com/1190/5119105082_e113afd892_t.jpg) repeat-x scroll 0 0 #f5f5f5;
min-width: 150px;
color: #333333;
font-size: 14px;
font-weight: normal;
float: none; margin: 0;
padding: 5px 10px;
font-weight:bold;
font-family:arial;
box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
text-align:left;}
#navx li li a:hover,
#navx li li a:active {
background: #F5F5F5;
color: #333;
}
#navx li {
float: left;
padding: 0; }
#navx li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin:0;
padding: 0;
border-top:1px solid #242424;
}
#navx li ul a {
width: 140px; }
#navx li ul ul {
margin: -41.5px 0 0 176px;
border:none;}
#navx li:hover ul ul,
#navx li:hover ul ul ul, #navx li.sfhover ul ul,
#navx li.sfhover ul ul ul {
left: -999em; }
#navx li:hover ul,
#navx li li:hover ul,
#navx li li li:hover ul,
#navx li.sfhover ul,
#navx li li.sfhover ul,
#navx li li li.sfhover ul {
left: auto; }
#navx li:hover,
#navx li.sfhover {
position: static; }

6. Save Template. 

7. Klik "Elemen Laman" tepat di samping kiri "Edit Html", 

8. Cari gadget dengan nama "MembuatMenu" letaknya tepat di atas "Posting Blog". 

9. Klik "Edit" dan masukkan kode berikut:

<div id='navbarmenuleftx'>
<ul id='navx'>

<li><a href='http://skocikita.blogspot.com/'>Home</a></li>
<li><a href='http://skocikita.blogspot.com/'>Menu 1</a></li>
<li><a href='http://skocikita.blogspot.com/'>Menu 2</a></li>
<li><a href='http://skocikita.blogspot.com/'>Menu 3</a></li>
<li><a href='http://skocikita.blogspot.com/'>Menu 4</a>
<ul>
<li><a href='http://skocikita.blogspot.com/'>Menu 4.1</a>
<ul>
<li><a href='http://skocikita.blogspot.com/'>Menu 4.1.1</a></li>
<li><a href='http://skocikita.blogspot.com/'>Menu 4.1.2</a></li>
<li><a href='http://skocikita.blogspot.com/'>Menu 4.1.3</a></li>
<li><a href='http://skocikita.blogspot.com/'>Menu 4.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://skocikita.blogspot.com/'>Menu 5</a>
<ul>
<li><a href='http://skocikita.blogspot.com/'>Menu 5.1.1</a></li>
<li><a href='http://skocikita.blogspot.com/'>Menu 5.1.2</a></li>
<li><a href='http://skocikita.blogspot.com/'>Menu 5.1.3</a></li>
<li><a href='http://skocikita.blogspot.com/'>Menu 5.1.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

10. Sekarang silahkan masukan link (warna merah) dan title (warna biru) yang akan ditampilkan pada navigasi.

11. Selesai, silahkan lihat hasilnya yaa...

Begitulah kira-kira, maaf gak maksut menggurui ;D

Hasilnya: