Cara Membuat Menu Drop Down Tanpa Script

Blogger Trick, Membuat menu drop down kini tidak hanya melalui kode script maupun jquery melainkan cukup menggunakan css. Dari pengalaman saya, menu drop down yang menggunakan css lebih ringan dibanding yang menggunakan kode script. Jika tertarik, silahkan ikuti tutorial di bawah:

1. Login blogger » Tata letak
2. Tambah gadget
3. Pilih HTML/Javascript
4. Kemudian masukkan kode css berikut

<style type="text/css">
#menu{background:url(http://1.bp.blogspot.com/-0TaEOItPUpk/T83khb8ORHI/AAAAAAAAAlQ/tN1zkOuRfdI/s1600/green-tab_02.gif); width:auto; height:32px; color:#5A6C8C; margin:0 auto; padding:0 3px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;}
#down{width:850px; float:left; margin:0; padding:0;}
#drop{margin:0; padding:0;}
#drop ul{float:left; list-style:none; margin:0; padding:0;}
#drop li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#drop li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:8px 10px 8px; font:bold 11px Arial, Times New Roman;}
#drop li a:hover, #drop li a:active{background:url(http://1.bp.blogspot.com/-BrqmFuU4hRE/T83nuWqpDpI/AAAAAAAAAlg/LABxzXl2xyQ/s1600/tab_right_black.png);color:#fff; padding:9px 15px 9px; text-decoration:none;-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;}
#drop li li a, #drop li li a:link, #drop li li a:visited{background:url(http://2.bp.blogspot.com/-AN0lFOOdwwc/T83mOJ7JtWI/AAAAAAAAAlY/0HPgrBjXlQI/s1600/680992255dcce09b1654cc28f86eacf35c4.jpg); width:150px; color:#e5e3e3; text-transform:capitalize;position:left; float:none; margin:0; padding:2px 5px; border-bottom:1px solid #151f23; border-left:px solid #151f23;border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;}
#drop li li a:hover, #drop li li a:active{background:url(http://1.bp.blogspot.com/-BrqmFuU4hRE/T83nuWqpDpI/AAAAAAAAAlg/LABxzXl2xyQ/s1600/tab_right_black.png); color:#fff; padding:3px 10px;-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;}
#drop li{float:left; padding:0;}
#drop li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:100px; margin:0; padding:0;}
#drop li ul a{width:140px;}
#drop li ul ul{margin:-24px 0 0 170px;}
#drop li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#drop 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;}
#drop li:hover, #nav li.sfhover{position:static;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}
</style>
<div id='outer'>
<div id='menu'>
<div id='down'>
<ul id='drop'>
<li><a href="URL">Menu1</a></li>
<li><a href"#">Menu2</a>
<ul>
<li><a href="URL">Submenu2</a></li>
<li><a href="URL">Submenu2</a></li>
<li><a href="URL">Submenu2</a></li>
</ul></li>
<li><a href"#">Menu3</a>
<ul>
<li><a href="URL">Submenu3</a></li>
<li><a href="URL">Submenu3</a></li>
</ul></li>
<li><a href="URL">Menu4</a></li>
<li><a href="URL">Menu5</a></li>
</ul>
</div>
</div>
</div>

# text url warna merah bisa anda ganti dengan url gambar lain