Cara Membuat Menu Drop down Horizontal

 kali ini saya share cara membuat menu dropdown horizontal bila di skroll ke bawah mengikuti scroll.bagi temen temen yang belum tau. buat temen-temen yang udah tau mohon di tambahi apabila ada kesalahan dalam penulisan.
 baikalah langsung saja ini tutorialnya langsung saja meluncur kebawah.

1.login ke blog sobat masing masing.
2.pilih menu template.
3. pilih edit html.

 kopy code di bawah ini dan pastekan/letakkan tepat di atas kode : </b:skin>


#nav-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6-PV9ECEqaCLWzB8ehLvJ4EyJ2pClTXWIqlYbEENlCpM8sgWMEvgvqPJuPfBrK5J6KTX5gtZ4bHTWWng5TcRsvXL-BcM7G2q-8ty0Y8jJ_dOhhimxdupjhk-oh1wJU4yWh7k36tcZqeY/s320/navbar.gif);width:100%;border-bottom:1px solid #222;margin:0 auto;padding:0 auto;position:fixed;top:0;left:0;right:0;height:35px;font-size:13px;z-index:99;}

#navbarmenu{width:950px;height:35px;font:bold 12px Tahoma;color:#777;font-weight:700;margin:0 auto;padding:0}
#navbar p{margin:0;padding:8px 0 0 15px}
#nav{margin:0;padding:0}
#nav li a,#nav li a:link,#nav li a:visited{color:#777;display:block;font-weight:700;text-decoration:none;border-right:1px solid #000;margin:0;padding:10px 15px 11px}
#nav li a:hover,#nav li a:active{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUVXOCXUszLoxrUSrJ7yF2Yn-_aSYvbmEusAdKpb5mQA8KKWdXX1B2Eh9dIwW6dWLwSpsGx-IVXPNIbaKXya8005FeJXCnwNl-pf2Q3PtQd-mAd4XEMcGQ3-NJnS8LYgtwQ0VHZ7IEaIw/s1600/navhov.gif);color:#FFF}
#nav li li a,#nav li li a:link,#nav li li a:visited{width:170px;background:#424242;color:#FFF;float:none;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;margin:0;padding:7px 10px}
#nav li li a:hover,#nav li li a:active{background:#000;color:#FFF;padding:7px 10px}
#nav li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:190px;margin:0;padding:0}
#nav li ul a{width:160px}
#nav li ul ul{margin:-30px 0 0 191px}
#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}
#nav ul,#nav li{float:left;list-style:none;margin:0;padding:0}
.social-profiles-widget img{margin:0 2px 0 0}
.social-profiles-widget img:hover{opacity:0.8}
.top-social-profiles{padding-top:2px;height:34px;text-align:right;float:right}
.top-social-profiles img{margin:0 6px 0 0 !important}
.top-social-profiles img:hover{opacity:0.8}
.top-social-profiles .widget-container{background:none;padding:0;border:0}







kemudian kopy  lagi kode di bawah ini dan pastekan/letakkan di bawah kode ; </head>

<div id='nav-wrapper'>
<div id='navbarmenu'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li><li><a href='#' title='Drop Menu'>Tutorial</a><ul><li><a href='#' title='Sub Menu 1.1'>Template Blogger</a></li><li><a href='#' title='Sub Page 1.2'>Blog</a></li></ul></li><li><a href='#' title='Drop Menu'>Download</a><ul><li><a href='#' title='Sub Menu 1.1'>Software</a></li><li><a href='#' title='Sub Page 1.2'>Aplikasi Android</a></li><li><a href='#' title='Sub Page 1.2'>Games</a></li><li><a href='#' title='Sub Page 1.2'>Music</a></li><li><a href='#' title='Sub Page 1.2'>Video</a></li></ul></li><li><a href='#' title='Blog Page'>Blog Page</a></li></ul>
<div class='top-social-profiles'>
<div class='widget-container'>
<div class='social-profiles-widget'>
<a href='http://flickr.com/' target='_blank'>
<img alt='Twitter' src='http://bocahndusun.wen.ru/image/flickr.png' title='Flickr'/></a><a href='http://twitter.com/' target='_blank'>
<img alt='Twitter' src='http://bocahndusun.wen.ru/image/twitter.png' title='Twitter'/></a><a href='http://facebook.com/' target='_blank'>
<img alt='Facebook' src='http://bocahndusun.wen.ru/image/facebook.png' title='Facebook'/></a><a href='https://plus.google.com/' target='_blank'>
<img alt='Google Plus' src='http://bocahndusun.wen.ru/image/googleplus.png' title='Google Plus'/></a><a href='http://www.linkedin.com/' target='_blank'>
<img alt='LinkedIn' src='http://bocahndusun.wen.ru/image/linkedin.png' title='LinkedIn'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank'>
<img alt='RSS Feed' src='http://bocahndusun.wen.ru/image/rss.png' title='RSS   Feed'/></a>
<a href='mailto:your@email.com' target='_blank'>
<img alt='Email' src='http://bocahndusun.wen.ru/image/email.png' title='Email'/></a>
</div></div></div></div>
<div style='clear:both;'/>
</div>


Demikian Tutorial Ini Semoga Berguna Dan Bermanfaat: