Cara Membuat Menu Horizontal Dropdown Pada Blog Dengan Script CSS

Menu horizontal dropdown ini persis seperti yang ada dalam blog saya. Sangat simple dan minimalis dan cepat dalam pemanggilannya. Pengen punya juga yang kayak gini..?


Langsung saja
1. Login ke blog dulu
2. Pilih Rancangan - Edit HTML
3. Cari kode ]]></b:skin> kemudian copy kode dibawah ini diatas ]]></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("https://lh4.googleusercontent.com/-Gl98yWnpo5M/TrT_v7EojJI/AAAAAAAAAVs/wYCfSms1sPU/s800/a.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: #06a1bf url("https://lh4.googleusercontent.com/-xI56qNvwRSE/TrT-IxWE7OI/AAAAAAAAAVQ/jCryCqJMQS8/s800/1%252520copi.png") 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:#06a1bf url('https://lh3.googleusercontent.com/-coSLcYJ9wcA/TrT-I93PK1I/AAAAAAAAAVU/U9S-GDw50b8/s800/2%252520cop1.png') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

4. Simpan template
5. Belum berhenti sampai disitu saja, lanjutkan dengan memilih menu Rancangan - Elemen Laman - Tambah Gadget - Pilih HTML atau Javascript
6. Copy kode dibawah ini dan masukkan kedalamnya

<div class="menu">
<ul>
<li><a href="http://mahmudista-tutorial.blogspot.com/">Home</a></li>
<li><a href="#">Blogging</a>
<ul>
<li><a href="http://mahmudista-tutorial.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://mahmudista-tutorial.blogspot.com/search/label/Edit%20HTML">Edit HTML</a></li>
<li><a href="http://mahmudista-tutorial.blogspot.com/search/label/Javascript">Javascript</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="http://mahmudista-tutorial.blogspot.com/search/label/New%20Gadget">New Gadget</a></li>
<li><a href="http://mahmudista-tutorial.blogspot.com/search/label/Posting">Posting</a></li>
<li><a href="http://mahmudista-tutorial.blogspot.com/search/label/Script">Script</a></li>
<li><a href="http://mahmudista-tutorial.blogspot.com/search/label/Tools">Tools</a></li>
</ul>
</li>
<li><a href="#">Friends</a>
<ul>
<li><a href="http://mahmudista.blogspot.com/">Big Boss</a></li>
<li><a href="#">University</a></li>
</ul>
</li>
<li><a href="#">Me</a>
<li><a href="http://mahmudista-tutorial.blogspot.com/2011/11/cara-memasang-tools-parse-html-pada.html">Parse HTML</a>
</li></li></ul>


</div>

atau bisa juga letakkan kode diatas setelah kode dibawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul Blog Sobat (Header)' type='Header'/>
</b:section>
</div> 

7. Simpan

Selesai sudah, bisa langsng dilihat hasilnya ?