Membuat multi level drop down menu di blog dan wapsite

Tutorial ini berlaku untuk wapego dan xxxego

• Pada cpanel klik "desain"
• kemudian klik "pengaturan gaya dan warna (CSS) halaman"
• Pilih "Versi WEB untuk komputer pribadi"
• Lalu klik "Ubah semua css (memerlukan pengetahuan css lanjut)"
• Hapus semua kode yang ada (gunakan ctrl+A kemudian delete)
• Masukkan kode berikut ini pada kolom Kode CSS : (download kode disini)
#nav {
float: left;
font: bold 14px Verdana;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
overflow: hidden;
}

#nav ul {
margin:0;
padding:0;
list-style:none;
}

#nav ul li {
float:left;
}

#nav ul li a {
float: left;
color:#d4d4d4;
padding: 5px 10px;
text-decoration:none;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

#nav li ul {
background:#3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
border-radius: 0 0 1px 1px;
-moz-border-radius: 0 0 1px 1px;
-webkit-border-radius: 0 0 1px 1px;
left: -999em;
margin: 25px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 150px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}

#nav ul li a:hover,
#nav ul li:hover > a {
color: #252525;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}

#nav li ul a:hover,
#nav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

#nav li:hover ul {
left: auto;
}

#nav li li ul {
margin: -1px 0 0 160px;
-webkit-border-radius: 0 1px 1px 1px;
-moz-border-radius: 0 1px 1px 1px;
border-radius: 0 1px 1px 1px;
visibility:hidden;
}

#nav li li:hover ul {
visibility:visible;
}

#nav ul ul li:last-child > a {
-moz-border-radius:0 0 1px 1px;
-webkit-border-radius:0 0 1px 1px;
border-radius:0 0 1px 1px;
}

#nav ul ul ul li:first-child > a {
-moz-border-radius:0 1px 0 0;
-webkit-border-radius:0 1px 0 0;
border-radius:0 1px 0 0;
}
</style>




• Kemudian masukan kode berikut tepat dibawahnya : (download kode disini)
<div id="nav">
<ul>
<li><a href="link">H O M E</a></li>
<li><a href="link">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="link">Sub menu 2.1</a></li>
<li><a href="link">Sub menu 2.2</a></li>
<li><a href="link">Sub menu 2.3</a></li>
</ul>
<li><a href="#">Menu 3</a>
<ul> 
<li><a href="link">Sub menu 3.1</a></li>
<li><a href="link">Sub menu 3.2</a></li> 
</ul>
<li><a href='#'>Menu 4</a>
<ul>
<li><a href='#'>Sub menu 4.1</a>
<ul>
<li><a href='#'>Sub menu 4.1.1</a>
</li>
<li><a href='link'>Sub menu 4.1.1.a</a></li>
<li><a href='link'>Sub menu 4.1.1.b</a></li>
</ul>
<li><a href='link'>Sub menu 4.2</a></li>
<li><a href='link'>Sub menu 5.1</a></li>
</ul>
</li>
<li><a href='#'>Menu 5</a>
<ul>
<li><a href='link'>Sub menu 5.1</a></li> 
<li><a href='link'>Sub menu 5.2</a></li>
</ul>
</li>
<li><a href='#'>Menu 6</a>
<ul>
<li><a href='link'>Sub menu 6.1</a></li>
<li><a href='link'>Sub menu 6.2</a></li>
</ul> 
</li>
<li><a href="link">Menu 7</a></li>
<li><a href='#'>Menu 8</a>
<ul>
<li><a href='link'>Sub menu 8.1</a></li>
<li><a href='link'>Sub menu 8.2</a></li>
</ul>
</li>
<li><a href='link'>Menu 9</a></li>
</ul>
<br style='clear: left'/>
</div>





• Klik "simpan perubahan"

Untuk blogspot ikuti tahap berikut ini :

• Login ke blogger
• Klik "template"
• cari kode : }]]></b:skin> , gunakan crtl F agar lebih cepat
• Letakkan KODE PERTAMA dari tutorial wapego tadi, TEPAT DIATAS }]]></b:skin>
• cari kode </head> , gunakan crtl F agar lebih cepat
• Letakkan KODE KEDUA dari tutorial wapego tadi, TEPAT DIATAS </head>
• Klik "simpan template"

SELAMAT MENCOBA

Tampilan multi level drop down menu akan seperti contoh gambar dibawah ini

catatan / notes :
untuk beberapa alasan tertentu, penulisan sengaja menon-aktifkan fungsi drag, klik kanan dan crtl C pada halaman ini. silahkan sobat copy paste kode yang penulis berikan pada link dan tempat yang telah penulis sediakan
Mohon maaf atas ketidak nyamanan ini. Pengertian sobat semua sungguh sangat penulis hargai dan hormati