Cara Memasang Menubar dropdown CSS di Blog

Fungsi menubar menurut pendapat saya :

Sebagai navigasi agar pengunjung tidak bingung mencari informasi berdasarkan menu-menu atau kategori
Agar blog atau website terlihat lebih simple, rapih dan teratur
dll.

Berikut langkah-langkahnya :

Masuk ke Blogger.com
Dashboard
Masuk ke Template
Edit HTML
Cari script berikut atau tekan Ctrl + F

<div class='main-outer'> atau

<div id='main-wrapper'> atau

<div id='main'> atau

<div class='main-outer'> (Recomendasi dari saya, Blog saya cari code ini)

Setelah Ketemu, Copy-paste source code dibawah ini di ATAS script code yang dicari tadi. di ATAS !!!

Pilih salah satu satu script !!!

<style>
#SBMenu1{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu1 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}
#SBMenu1 a{float: left;height: 25px;padding: 0 20px;color: #999;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}
#SBMenu1 li:hover > a{color: #ffffff;}
*html #SBMenu1 li a:hover /* IE6 */{color: #ffffff;}
#SBMenu1 li:hover > ul{display: block;}
/* Sub-SBMenu1 */
#SBMenu1 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu1 ul ul{top: 0;left: 150px;}
#SBMenu1 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}
#SBMenu1 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu1 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}
*html #SBMenu1 ul a /* IE6 */{height: 10px;}
*:first-child+html #SBMenu1 ul a /* IE7 */{height: 10px;}
#SBMenu1 ul a:hover{background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);}
#SBMenu1 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}
#SBMenu1 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu1 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu1 ul li:first-child a:hover:after{border-bottom-color: #04acec;}
#SBMenu1 ul ul li:first-child a:hover:after{border-right-color: #04acec;border-bottom-color: transparent;}
#SBMenu1 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu1:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
* html #SBMenu1 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu1 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu1">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu2{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#0B7E88, #0B7E88);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu2 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu2 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu2 li:hover > a{color: #ffffff;}*html #SBMenu2 li a:hover /* IE6 */{color: #ffffff;}#SBMenu2 li:hover > ul{display: block;}
/* Sub-SBMenu2 */
#SBMenu2 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu2 ul ul{top: 0;left: 150px;}#SBMenu2 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu2 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu2 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu2 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu2 ul a /* IE7 */{height: 10px;}
#SBMenu2 ul a:hover{background: #0B7E88;background: -moz-linear-gradient(#0B7E88, #0B7E88);background: -webkit-gradient(linear, left top, left bottom, from(#0B7E88), to(#0B7E88));background: -webkit-linear-gradient(#0B7E88, #0B7E88);background: -o-linear-gradient(#0B7E88, #0B7E88);background: -ms-linear-gradient(#0B7E88, #0B7E88);background: linear-gradient(#0B7E88, #0B7E88);}
#SBMenu2 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu2 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu2 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu2 ul li:first-child a:hover:after{border-bottom-color: #0B7E88;}#SBMenu2 ul ul li:first-child a:hover:after{border-right-color: #0B7E88;border-bottom-color: transparent;}#SBMenu2 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu2:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu2 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu2 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu2">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu3{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#0101f9, #0101f9);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu3 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu3 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu3 li:hover > a{color: #ffffff;}*html #SBMenu3 li a:hover /* IE6 */{color: #ffffff;}#SBMenu3 li:hover > ul{display: block;}
/* Sub-SBMenu3 */
#SBMenu3 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu3 ul ul{top: 0;left: 150px;}#SBMenu3 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu3 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu3 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu3 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu3 ul a /* IE7 */{height: 10px;}
#SBMenu3 ul a:hover{background: #0101f9;background: -moz-linear-gradient(#0101f9, #0101f9);background: -webkit-gradient(linear, left top, left bottom, from(#0101f9), to(#0101f9));background: -webkit-linear-gradient(#0101f9, #0101f9);background: -o-linear-gradient(#0101f9, #0101f9);background: -ms-linear-gradient(#0101f9, #0101f9);background: linear-gradient(#0101f9, #0101f9);}
#SBMenu3 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu3 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu3 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu3 ul li:first-child a:hover:after{border-bottom-color: #0101f9;}#SBMenu3 ul ul li:first-child a:hover:after{border-right-color: #0101f9;border-bottom-color: transparent;}#SBMenu3 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu3:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu3 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu3 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu3">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu4{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#7B990C, #7B990C);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu4 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu4 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu4 li:hover > a{color: #ffffff;}*html #SBMenu4 li a:hover /* IE6 */{color: #ffffff;}#SBMenu4 li:hover > ul{display: block;}
/* Sub-SBMenu4 */
#SBMenu4 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu4 ul ul{top: 0;left: 150px;}#SBMenu4 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu4 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu4 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu4 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu4 ul a /* IE7 */{height: 10px;}
#SBMenu4 ul a:hover{background: #7B990C;background: -moz-linear-gradient(#7B990C, #7B990C);background: -webkit-gradient(linear, left top, left bottom, from(#7B990C), to(#7B990C));background: -webkit-linear-gradient(#7B990C, #7B990C);background: -o-linear-gradient(#7B990C, #7B990C);background: -ms-linear-gradient(#7B990C, #7B990C);background: linear-gradient(#7B990C, #7B990C);}
#SBMenu4 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu4 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu4 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu4 ul li:first-child a:hover:after{border-bottom-color: #7B990C;}#SBMenu4 ul ul li:first-child a:hover:after{border-right-color: #7B990C;border-bottom-color: transparent;}#SBMenu4 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu4:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu4 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu4 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu4">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu5{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#395540, #395540);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu5 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu5 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu5 li:hover > a{color: #ffffff;}*html #SBMenu5 li a:hover /* IE6 */{color: #ffffff;}#SBMenu5 li:hover > ul{display: block;}
/* Sub-SBMenu5 */
#SBMenu5 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu5 ul ul{top: 0;left: 150px;}#SBMenu5 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu5 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu5 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu5 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu5 ul a /* IE7 */{height: 10px;}
#SBMenu5 ul a:hover{background: #395540;background: -moz-linear-gradient(#395540, #395540);background: -webkit-gradient(linear, left top, left bottom, from(#395540), to(#395540));background: -webkit-linear-gradient(#395540, #395540);background: -o-linear-gradient(#395540, #395540);background: -ms-linear-gradient(#395540, #395540);background: linear-gradient(#395540, #395540);}
#SBMenu5 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu5 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu5 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu5 ul li:first-child a:hover:after{border-bottom-color: #395540;}#SBMenu5 ul ul li:first-child a:hover:after{border-right-color: #395540;border-bottom-color: transparent;}#SBMenu5 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu5:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu5 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu5 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu5">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu6{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#FF0C39, #FF0C39);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu6 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu6 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu6 li:hover > a{color: #ffffff;}*html #SBMenu6 li a:hover /* IE6 */{color: #ffffff;}#SBMenu6 li:hover > ul{display: block;}
/* Sub-SBMenu6 */
#SBMenu6 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu6 ul ul{top: 0;left: 150px;}#SBMenu6 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu6 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu6 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu6 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu6 ul a /* IE7 */{height: 10px;}
#SBMenu6 ul a:hover{background: #FF0C39;background: -moz-linear-gradient(#FF0C39, #FF0C39);background: -webkit-gradient(linear, left top, left bottom, from(#FF0C39), to(#FF0C39));background: -webkit-linear-gradient(#FF0C39, #FF0C39);background: -o-linear-gradient(#FF0C39, #FF0C39);background: -ms-linear-gradient(#FF0C39, #FF0C39);background: linear-gradient(#FF0C39, #FF0C39);}
#SBMenu6 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu6 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu6 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu6 ul li:first-child a:hover:after{border-bottom-color: #FF0C39;}#SBMenu6 ul ul li:first-child a:hover:after{border-right-color: #FF0C39;border-bottom-color: transparent;}#SBMenu6 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu6:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu6 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu6 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu6">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu7{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#FF9900, #FF9900);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu7 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu7 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu7 li:hover > a{color: #ffffff;}*html #SBMenu7 li a:hover /* IE6 */{color: #ffffff;}#SBMenu7 li:hover > ul{display: block;}
/* Sub-SBMenu7 */
#SBMenu7 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu7 ul ul{top: 0;left: 150px;}#SBMenu7 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu7 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu7 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu7 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu7 ul a /* IE7 */{height: 10px;}
#SBMenu7 ul a:hover{background: #FF9900;background: -moz-linear-gradient(#FF9900, #FF9900);background: -webkit-gradient(linear, left top, left bottom, from(#FF9900), to(#FF9900));background: -webkit-linear-gradient(#FF9900, #FF9900);background: -o-linear-gradient(#FF9900, #FF9900);background: -ms-linear-gradient(#FF9900, #FF9900);background: linear-gradient(#FF9900, #FF9900);}
#SBMenu7 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu7 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu7 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu7 ul li:first-child a:hover:after{border-bottom-color: #FF9900;}#SBMenu7 ul ul li:first-child a:hover:after{border-right-color: #FF9900;border-bottom-color: transparent;}#SBMenu7 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu7:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu7 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu7 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu7">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

Simpan Template

Selamat Mencoba :)

Monday, August 17, 2015

Cara Memasang Menubar dropdown CSS di Blog

Pilih salah satu satu script !!!

No comments:

Post a Comment

Labels

eBook Gratis

Software

Total Pageviews