Cara membuat menu navigasi horisontal dropdown vertikal

Setelah mencari berbagai referensi dari para blogger tentang cara membuat menu navigasi horisontal dropdown vertikal maka saya temukan cara seperti di bawah ini. Cara ini merupakan cara simple dari beberapa cara yang banyak para blogger buat. Saya telah mencoba mencari dan mencoba dari beberapa cara, namun baru cara ini yang mudah di buat. Cara ini saya ambil dari sini.

1. Login ke akun blogger
Pilih Dashboard - Tata letak (Rancangan) - Edit HTML

menu horisontalcari kode berikut:

cari kode berikut:

]]></b:skin>

2. Di bagian atas kode tersebut masukkan kode berikut

menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Arial", Arial;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

font-size:14px;

font-weight:bold;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;

}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

}

3. Simpan template

4. Pada gadget html/javascript, masukkan kode berikut:

<div class="menu">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Tutorial</a>

<ul>

<li><a href="#">Windows Tricks</a></li>

<li><a href="#">Internet</a></li>

<li><a href="#">Software</a></li>

<li><a href="#">Microsoft Excel</a></li>

<li><a href="#">Microsoft Word</a></li>

<li><a href="#">Data recovery</a></li>

<li><a href="#">Antivirus</a></li>

</ul>

</li>

<li><a href="#">Blog</a>

<ul>

<li><a href="#">Blog Tips</a></li>

<li><a href="#">SEO Tips</a></li>

<li><a href="#">Adsense</a></li>

<li><a href="#">Feed</a></li>

</ul>

</li>

<li><a href="#">Phone Tips</a>

<ul>

<li><a href="#">Phone Secret Codes</a></li>

<li><a href="#">Phone Screenshot</a></li>

</ul>

</li>

<li><a href="#">Link</a>

<ul>

<li><a href="#">Artikel Komputer</a></li>

<li><a href="#">Panduan SEO</a></li>

</ul>

</li>

<li><a href="#">ArcGIS Tutorial</a></li>

<li><a href="#">Free Translator</a></li>

<li><a href="#">Link Exchange</a></li>

</ul>

</div>

catatan:
Ganti tanda # pada href="#" dengan url target
Ganti Home, Tutorial, ... dengan teks yang akan ditampilkan di menu navigasi
Silahkan dicoba.....
Semoga berhasil.....