Memasang Menu Drop Down Horizontal Massive Blue

Apakah anda tau apa itu menu drop down horizontal ? Menu Drop Down ini memang sangat memudahkan pengunjung blog anda ketika ingin memilih label yang cocok,dll.Cara kerjanya,ketika cursor mouse menyorot ke salah satu menu,maka dia akan menampilkan beberapa submenu lagi.Sebagai contohnya,silakan perhatikan gambar di bawah.

Untuk cara memasangnya,silakan perhatikan langkah-langkah di bawah ini :
1. Login ke Blogger - Rancangan - Edit HTML
2. Cari kode  ]]></b:skin>
3. Letakkan kode berikut tepat di atas kode  ]]></b:skin>

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;
}

4. Simpan Tempate.Ke Elemen Laman - Add a Gadget - HTML/JavaScript

5. Paste kode berikut :

<div class="menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu 2.1</a></li>
<li><a href="#">Sub Menu 2.2</a></li>
<li><a href="#">Sub Menu 2.3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.2</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a> </li> 
<li><a href="#">Menu 5</a> </li> 
</ul>
</div>

Keterangan :

Ganti tulisan berwarna biru # dengan URL yang anda inginkan

Ganti tulisan berwarna merah sesuai keinginan anda

Selesai

Semoga Bermanfaat

LIVE DEMO

Sumber Artikel : http://jogoyitnan-free.blogspot.com