Cara Pasang Menu Halaman Dropdown

Sebelumnya jOe pengen ngucapin "Happy Night Weekend" buat sObat JuniOr semua. Dikarenakan ada salah satu sObat JuniOr yang request, bagaimana sih menampilkan halaman dalam bentuk dropdown seperti yang jOe punya, seperti ini contoh tampilanya :

Jadi ketika sObat meletakan kursor mouse di menu utama, maka akan ditampilkanlah submenu-submenunya seperti yang terlihat pada gambar diatas.
Nah, buat yang ingin mengunakan Halaman Menu Dropdown di Blognya,

Silahkan Ikuti Tutorialnya :

1. Login ke Blogger.
2. Pilih Edit Tamplate
3. Pilih Edit HTML
4. Silakan anda copy kode di bawah ini :

/* ----- NAVBAR MENU ----- */
#NavbarMenu {

width:1000px;
height: 36px;
background: #000000 url() repeat-x top;
color: #ff5500;
margin: auto;
padding: 0;
font: bold 13px Arial, Tahoma, Verdana;
border-top: 2px solid #AFAFAF;
border-bottom: 2px solid #FFFFFF;
}
#NavbarMenuleft {
width: 920px;
float: left;
margin: 0;
padding: 0px 15px;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #ffffff;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 13px VERDANA;
border-top: 3px solid #AFAFAF;
border-bottom: 2px solid #FFFFFF;
border-right: 2px solid #AFAFAF;
border-left: 2px solid #AFAFAF;
}
#nav li a:hover, #nav li a:active {
background: #333333;
color: #fc8406;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
font: normal 13px VERDANA;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333333 url() repeat-x top;
width: 150px;
color: #fc8406;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-top: 1px solid #888888;
border-bottom: 1px solid #888888;
border-left: 1px solid #888888;
border-right: 1px solid #888888;
font: normal 13px,;
}

#nav li li a:hover, #nav li li a:active {
background: #000;
color: #ffffff;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

6. Simpan di atas kode ]]><b:skin>

Catatan :

Untuk mempermudah pengeditan Klik Disini
Pada text yang berwarna Kuning di atas sesuaikanlah dengan lebar tamplate yang sObat gunakan
Pada text yang berwarna Merah di atas sesuaikanlah dengan kode warna yang sObat inginkan

7. Setelah itu silakan sObat copy kode berikut ini :

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul>
<li><a href="Link sObat.com/">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="Link sObat.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

</div> 
</div>

8. Simpan di bawah <Body>
9. Kemudian Save / Simpan Template
10. Liat deh hasilnya

keterangan :
Jika sObat ingin menambah dropdown lagi tinggal tambahkan saja kode :

<li><"#">Folder 4</a>
<ul>
<li><"#">Sub Item 4.1</a></li>
<li><"#">Sub Item 4.2</a></li>
</ul>
</li>

Jika ada pertanyaan tulis di Buku Tamu yah sOb