berikut ini adalah cara membuat menu dropdown dg mudah:
1. Login ke Blogger
2. Pilih Rancangan
3. Pilih Edit HTML
4. Jangan Lupa Untuk Membackupd dulu template blog anda, klik Download Template Lengkap
5. Silakan copy kode di bawah ini :
#NavbarMenu{background:#000000; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-24px 0 0 170px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav 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;}
#nav li:hover, #nav li.sfhover{position:static;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#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;}
Ket: ubah kode yg berwana hijau dg kode warna yg anda inginkan
7. Setelah ketemu simpan kode yang sudah di copy tadi dan paste kan tepat di atas ]]></b:skin>
8. Selanjutnya silakan tambah gadegate html kemudian masukkan kode di bawah ini:
Ket: ganti tulisan yang berwana hijau dengan jdul yg anda inginkan serta ganti link berwarna merah dengan link yang anda inginkan<div id="outer"><div id="NavbarMenu"><div id="NavbarMenuleft"><ul id="nav"><li><a href="http://desaingrafismasfadil.blogspot.com/">Home</a></li><li><a href="http://www.blogger.com/rearrange?blogID=2126175626793290356&sectionId=crosscol&action=editWidget&widgetType=HTML&referrer=directory#">Tutorial Desain</a><ul><li><a href="http://desaingrafismasfadil.blogspot.com/search/label/Desain">Desain</a></li><li><a href="http://desaingrafismasfadil.blogspot.com/search/label/Tutorial%20CorelDraw">CorelDraw</a></li><li><a href="http://desaingrafismasfadil.blogspot.com/search/label/CorelDraw%20Menengah">CorelDraw Menengah</a></li><li><a href="http://desaingrafismasfadil.blogspot.com/search/label/Tutorial%20Photoshop">Photoshop</a></li></ul></li><li><a href="http://www.blogger.com/rearrange?blogID=2126175626793290356&sectionId=crosscol&action=editWidget&widgetType=HTML&referrer=directory#">Panduan NgeBlog</a><ul><li><a href="http://desaingrafismasfadil.blogspot.com/search/label/Panduan%20Membuat%20Blog">Panduan &Trik Blog</a></li><li><a href="http://desaingrafismasfadil.blogspot.com/search/label/Bisnis%20Internet">Bisnis Internet</a></li></ul></li><li><a href="http://www.blogger.com/rearrange?blogID=2126175626793290356&sectionId=crosscol&action=editWidget&widgetType=HTML&referrer=directory#">Extra Time</a><ul><li><a href="http://desaingrafismasfadil.blogspot.com/search/label/HUMOR">Humor</a></li><li><a href="http://desaingrafismasfadil.blogspot.com/search/label/extra%20time">Unik</a></li><li><a href="http://www.goal.com/id-ID/news/2835/jadwal-televisi/archive/1">Jadwal Sport di TV</a></li></ul></li><li><a href="http://www.blogger.com/rearrange?blogID=2126175626793290356&sectionId=crosscol&action=editWidget&widgetType=HTML&referrer=directory#">Berita Hot</a><ul><li><a href="http://lanusmaniacilacap.blogspot.com/">PSCS CILACAP</a></li><li><a href="http://www.goal.com/id-ID/">All About FootBall</a></li><li><a href="http://www.seag2011.com/in/news/">[ Berita Sea Games ]</a></li></ul></li></ul></div><div id="search"><form action="/search/" id="searchform" method="get" style="display:inline;"><input id="searchbox" maxlength="200" name="q" type="text" value="Search..." onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" /><input class="btn" type="submit" value="Go" /></form></div></div></div>
lihat contoh yg sudah jadi: http://desaingrafismasfadil.blogspot.com/
semoga bermanfaat.....
