Cara Membuat Menu Horizontal Drop Down

Bagi kamu yang ingin memiliki menu drop down yang keren, kamu bisa membuat menu horizontal drop down dengan animasi ini, ketika drop down nya muncul akan memberikan efek animasi yang keren. Cara membuatnya juga gampang dan simpel, tidak ribet bahkan kamu bisa utak atik desain tampilannya.

1. Login ke blog kamu
2. Pilih Template > Edit HTML > Cari kode <b:skin><![CDATA[
3. Letakan kode di bawah ini tepat di atas kode <b:skin><![CDATA[


#top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiLsP3nRdMkO0PAXUBxEB3Ag9TkRJH3GfNgD-7fSajoC_YWqovtgXN1_U7lgHcMOD9A7-s4Mu_HwgJq6khzwtvQjbRmKKk2eXxg37v050IwueTJLhOikmdVondF6d8gZq7GOlm8wLxxxg/s1600/topbar.png) repeat-x top;width:1000px;border-top:1px solid #001332;border-bottom:1px solid #001332;margin:0 auto;padding:0 auto}
#topbar{width:1000px;height:27px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#668dce;padding:7px 10px}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHHwGYPj1ubKNcZcuXwsRe6jfkExufscKzbYK60NQxkhbhhChKVs4lpMCqp29UJ09hMCO0R8Xzi4-BzmVA9Ay25DxIugFUUpOz_MJI_k5PQBWLeTiING_F2MprzK5tAiSfwhlhgmahczQ/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#999;padding-bottom:0;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#999;color:#111}
#top li:hover ul a,#top li.hvr ul a{color:#111;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #aaa;border-top:1px solid #666;display:block;font-size:1px;height:0;line-height:0;margin:0}
#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#ddd;display:block;line-height:16px;text-transform:uppercase}

4. Jika sudah, klik Save Template,lalu klik Page Element pilih  html/javascript Copy paste kode dibawah ini

 <div id='top-wrapper'>

<div id='topbar'>

<ul id='top'>

<li><a href='/'><span>Welcome</span>Homepage</a></li>

<li><a href='#'><span>This is</span>About Us</a></li>

<li><a class='arrow' href='#'><span>Support</span>Contact Us</a>

<ul>

<li><a href='#'>Goggle +</a></li>

<li class='hr'></li>

<li><a href='#'>Contact on Facebook</a></li>

<li class='hr'></li>

<li><a href='#'>Contact on Twitter</a></li>

</ul>

</li>

<li><a href='#'><span>Sport</span>Be healthy</a></li>

<li><a href='#'><span>Culture</span>Human Act</a></li>

<li><a class='arrow' href='#'><span>Entertainment</span>Enjoy your life</a>

<ul>

<li><a href='#'>Music</a></li>

<li class='hr'></li>

<li><a href='#'>Movie</a></li>

<li class='hr'></li>

<li><a href='#'>Television</a></li>

</ul>

</li>

<li><a href='#'><span>Health</span>Take a trip</a></li>

<li><a href='#'><span>Help Instruction</span>How to use this template</a></li>

<li><a href='#'><span>Sample Page</span>Static Page</a></li>

</ul>



lalu simpan jangan lupa edit terlebih dahulu kode diatas sesuai dengan isi yang ada pada blog anda..

Selamat mencoba semoga informasi tersebut bermanfaat untuk anda