Cara Membuat Dropdown Menu (Navigasi Horizontal)

Ok, bagi teman-teman yang mau membuatnya, silahkan ikuti langkah-langkah di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Lalu cari kode : ]]></b:skin> ,lalu masukkan kode berikut diatasnya.

/* menu*/
#catmenucontainer{
height:37px;
display:block;
padding:0px 0 0px 0px;
font: 12px Arial,Tahoma,Century gothic,verdana, sans-serif;
font-weight:normal;
}
#catmenu{
margin: 0px 0px 0px 0px;
padding: 0px 0px;
height:37px;
overflow:hidden;
}
#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px 10px;
}
#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color:#ddd;
display: block;
margin: 0px;
padding: 0px 10px ;
line-height:37px;
}
#catmenu li a:hover, #catmenu li a:active {
background:#B70F0F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfASOaZBaiNg9VM16lk6g4UktnPFvsmoG1GGTDBGD_2uw2mq71TMC3LsmFM_iV5sZzU4gWov8DV8TkFD5rzrXolrdqHU-TMZXyAKBQB88igtnNIWJ0mOFpoN0HeNc98_9n6HSIh-81Fpw/s1600/catmenua.png) repeat-x;
color: #fff;
margin: 0px;
padding: 0px 9px ;
line-height:37px;
text-decoration: none;
border-left:1px solid #e3100e;
border-right:1px solid #e3100e;
}
#catmenu li.current_page_item a {
background:#B70F0F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfASOaZBaiNg9VM16lk6g4UktnPFvsmoG1GGTDBGD_2uw2mq71TMC3LsmFM_iV5sZzU4gWov8DV8TkFD5rzrXolrdqHU-TMZXyAKBQB88igtnNIWJ0mOFpoN0HeNc98_9n6HSIh-81Fpw/s1600/catmenua.png) repeat-x;
border-left:1px solid #e3100e;
border-right:1px solid #e3100e;
color: #fff;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#363737 ;
width: 150px;
color: #bebebe;
font-weight: normal;
float: none;
margin: 0px;
padding: 0px 10px ;
line-height:30px;
border-bottom:1px solid #212121;
}
#catmenu li li a:hover, #catmenu li li a:active {
background:#4a4a4a;
color: #fff;
padding: 0px 10px ;
line-height:30px;
border-left:none;
border-right:none;
border-bottom:1px solid #212121;
}
#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 5px;
background:#212121 ;
}
#catmenu li li {
}
#catmenu li ul a {
width: 140px;
}
#catmenu li ul a:hover, #catmenu li ul a:active {
}
#catmenu li ul ul {
margin: -36px 0 0 170px;
}
#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover1 ul ul, #catmenu li.sfhover1 ul ul ul {
left: -999em;
}
#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover1 ul, #catmenu li li li.sfhover1 ul {
left: auto;
}
#catmenu li:hover, #catmenu li.sfhover1 {
position: static;
}
/*Page menu*/
#foxmenucontainer{
height:36px;
display:block;
padding:0px 0 0px 0px;
font: 12px Arial, Tahoma,Century gothic,verdana, sans-serif;
font-weight:normal;
float:left;
width:1000px;
background:#B70F0F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ-xbMF9R5Salf0ZYnDYIwlhkY0eZUvBA1U02JoL4bdHoyAJGXQx9N-cE3HTekARbhgvbEMsEqXp3rdYNOTaV6FDU9LLr2kxOwrP8afq6QrDeW9aB0J-bQGQOAUwk0v_oBVw3wnWsMTCE/s1600/foxmenu.jpg) repeat-x;
}
#menu{
margin:0px 10px;
padding: 0px;
height:36px;
overflow:hidden;
}
#menu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#menu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#menu li a, #menu li a:link, #menu li a:visited {
color:#ddd;
display: block;
margin: 0px;
padding: 0px 10px ;
line-height:36px;
}
#menu li a:hover, #menu li a:active {
color: #fff;
margin: 0px;
padding: 0px 10px ;
line-height:36px;
text-decoration: none;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#6C0705;
width: 150px;
color:#ddd;
font-weight: normal;
float: none;
margin: 0px;
padding: 0px 10px ;
line-height:32px;
border-bottom: 1px solid #4F0200;
}
#menu li li a:hover, #menu li li a:active {
background: #970C0B;
color: #fff;
padding: 0px 10px ;
line-height:32px;
}
#menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 5px;
background:#4F0605;
}
#menu li li {
}
#menu li ul a {
width: 140px;
}
#menu li ul a:hover, #menu li ul a:active {
}
#menu li ul ul {
margin: -38px 0 0 170px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul,
#menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul,
#menu li li li:hover ul, #menu li.sfhover ul,
#menu li li.sfhover ul, #menu li li li.sfhover ul {
left: auto;
}
#menu li:hover, #menu li.sfhover {
position: static;
}

4. Selanjutnya cari kode : <b:section class='main' id='main' showaddelement='no'> , lalu copy code di bawah ini : ( dan letakkan di atasnya :

<div id='catmenucontainer'>

   <div id='catmenu'>

        <ul>
            <li class='page_item current_page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
            <li><a href='#' title='Sample Page'>Sample Page</a>

<ul>
   <li><a href='#' title='Child Page'>Child Page1</a></li>
   <li><a href='#' title='Child Page2'>Child Page2</a>
   <ul>
        <li><a href='#' title='Subpage'>Subpage</a></li>
   </ul>
</li>
   <li><a href='#' title='Sample Page'>Sample Page</a></li>

</ul>
</li>
<li><a href='#' title='About'>About</a></li>
<li><a href='#'>Archives</a></li>
<li><a href='#'>Contact</a>
<ul>
<li><a href='#' title='Profile'>Profile</a></li>
</ul>
</li>
        </ul>
   </div>

</div>

<div id='foxmenucontainer'>

   <div id='menu'>

        <ul>
            <li><a href='#' title='View all posts filed under Business'>Business</a>
<ul class='children'>
   <li><a href='#' title='View all posts filed under Internat'>Internat</a>
</li>
   <li><a href='#' title='View all posts filed under Market'>Market</a>

</li>
   <li><a href='#' title='View all posts filed under Stock'>Stock</a>
</li>
</ul>
</li>
   <li><a href='#' title='View all posts filed under Downloads'>Downloads</a>
<ul class='children'>
   <li><a href='#' title='View all posts filed under Dvd'>Dvd</a>
</li>
   <li><a href='#' title='View all posts filed under Games'>Games</a>

</li>
   <li><a href='#' title='View all posts filed under Software'>Software</a>
   <ul class='children'>
   <li><a href='#' title='View all posts filed under Office'>Office</a>
</li>
   </ul>
</li>
</ul>
</li>
   <li><a href='#' title='View all posts filed under Entertainment'>Entertainment</a>

<ul class='children'>
   <li><a href='#' title='View all posts filed under Football'>Football</a>
</li>
</ul>
</li>
   <li><a href='#' title='Description for featured category'>Featured</a>
</li>
   <li><a href='#' title='View all posts filed under Health'>Health</a>
<ul class='children'>
   <li><a href='#' title='View all posts filed under Childcare'>Childcare</a>

</li>
   <li><a href='#' title='View all posts filed under Doctors'>Doctors</a>
</li>
</ul>
</li>
        </ul>
   </div>
</div>

Sedikit Tambahan ::
- Untuk Penempatan Kode Menunya, selain diatas Kode :

<b:section class='main' id='main' showaddelement='no'>

-Bisa Juga Diatas Kode :

- Sobat Tinggal pilih, mau taruh dimana..

6. Terakhir Save Templates.. dan lihat hasilnya..