Membuat Menu Horizontal dengan Sub Menu Vertikal

Membuat Menu Horizontal dengan Sub Menu Vertikal maksudnya membuat menu horizontal yang jika mouse kita di arahkan atau mengklik menu tersebut, akan muncul beberapa menu kebawah.

nah sekarang saya akan memberi TUTORIALnya

1. Login ke akun Blogspot
2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
3. Back up terlebih dahulu template dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, supaya mengembalikannya bentuk blog ke seperti semula dengan menguploadnya kembali.
4. JANGAN beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
5. Setelah itu untuk menambah menu horizontal tinggal kopi kode berikut

Buka HTML Kilk ! :

<div id="nav">
<ul>
<li><a href="URL">NAMA</a></li>
<li><a href='URL'>NAMA</a>
<ul>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
</ul>
</li>
<li><a href='URL'>NAMA</a>
<ul>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
</ul>
</li>
<li><a href='URL'>NAMA </a>
<ul>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
</ul>
</li>
<li><a href='URL'>NAMA</a>
<ul>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
</ul>
</li>
</ul>
</div>

Edit :
cari
<li><a href='URL'>NAMA</a>

ganti URL dengan url yang anda inginkan dan NAMA dengan nama menunya
kemudian cari
<li><a href='URL tambahan'>NAMA tambahan</a></li>

ganti URL tambahan dengan url vertikalnya dan NAMA tambahan dengan nama menu Vertikalnya

10. Jangan lupa mengganti kode URL dan nama yang berwarna merah.
11. Paste dibawah kode

<div>
.....
<b:widget id='Header1' locked='false' .....dst.........'/>
</b:section>
</div>

Langkah Selanjutnya Copy Kode Dibawah Ini:

Buka HTML Klik! :

#NavbarMenu {
background: #000;
width: 874px;
height: 35px;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
color: #fff;
font-weight: bold;
margin: 0px;
padding: 0px;
}

#NavbarMenuleft {
width: 874px;
float: left;
margin: 0;
padding: 0;
}

#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 {
background: #808080;
height: 24px;
color: #fff;
display: block;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: bold;
text-transform: none;
text-decoration: none;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border-right: 1px solid #000;
}

#nav li a:hover, #nav li a:active {
background: #c0c0c0;
color: #000;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #c0c0c0;
width: 150px;
color: #000;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border: 1px solid #000;
}

#nav li li a:hover, #nav li li a:active {
background: #000;
color: #fff;
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;
}

Setelah itu paste diatas ]]></b:skin> lalu save template.

Silahkan MENCOBA !!