Cara Membuat Menu Dropdown di Blogger

Apa itu Menu Dropdown ?
Menu Dropdown adalah menu yang jika kita
mengarahkan kursor ke menu tersebut
maka akan muncul menu lainya yang
memanjang kebawah.
dan Apa sich kegunaan dari Menu Dropdown ini.
Menu Dropdown ini berguna untuk
membuat menu tanpa harus memakan
banyak tempat.misalnya saja untuk menu-menu postingan kamu,atau bisa juga sebagai menu utama blog. dan yang jelas Menu Dropdown ini tidak akan memakan tempat yang banyak.
untuk membuatnya silakan ikuti tutorial Cara Membuat Menu Dropdown berikut ini. Check it out ;)

1. login ke dasboard
2. Buka opsi lainya
3. Pilih template
4. Kemudian masukan code dibawah tepat
diatas ]]></b:skin>
5. Paste dan simpan.
Tahap 1
/* CSS3 Drop Down Menu by Ajatshare*/
#nav {
float: left;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
overflow: hidden;
width: 100%;
background: #3C4042;
background: -webkit-gradient( linear, left
bottom, left top, color-stop(0.09, rgb
(59,63,65)), color-stop(0.55, rgb(72,76,77)),
color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center
bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%,
rgb(75,77,77) 78% );
background: -o-linear-gradient( center
bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%,
rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1)
inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
}
#nav ul li a {
float: left;
color: #d4d4d4;
padding: 10px 20px;
text-decoration: none;
background: #3C4042;
background: -webkit-gradient( linear, left
bottom, left top, color-stop(0.09, rgb
(59,63,65)), color-stop(0.55, rgb(72,76,77)),
color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center
bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%,
rgb(75,77,77) 78% );
background: -o-linear-gradient( center
bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%,
rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1)
inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255,
0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
#nav ul li a:hover,
#nav ul li:hover > a {
color: #252525;
background: #3C4042;
background: -webkit-gradient( linear, left
bottom, left top, color-stop(0.09, rgb
(77,79,79)), color-stop(0.55, rgb(67,70,71)),
color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center
bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%,
rgb(69,70,71) 78% );
background: -o-linear-gradient( center
bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%,
rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2)
, 0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradient( linear, left
bottom, left top, color-stop(0.17, rgb
(61,111,177)), color-stop(0.51, rgb
(80,136,199)), color-stop(1, rgb(92,154,205))
);
background: -moz-linear-gradient( center
bottom, rgb(61,111,177) 17%, rgb(80,136,199)
51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center
bottom, rgb(61,111,177) 17%, rgb(80,136,199)
51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#nav li ul {
background: #3C4042;
background-image: -webkit-gradient( linear,
left bottom, left top, color-stop(0.09, rgb
(77,79,79)), color-stop(0.55, rgb(67,70,71)),
color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient
( center bottom, rgb(77,79,79) 9%, rgb
(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient
( center bottom, rgb(77,79,79) 9%, rgb
(67,70,71) 55%, rgb(69,70,71) 78% );
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4)
inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0,
0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#nav li:hover ul {
left: auto;
}
#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
.nav ul li ul {
position: absolute;
left: 0;
display: none;
visibility: hidden;
}
.nav ul li ul li {
display: list-item;
float: none;
}
.nav ul li ul li ul {
top: 0;
}
.nav ul li ul li a {
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
#nav li li ul {
margin: -1px 0 0 160px;
visibility: hidden;
}
#nav li li:hover ul {
visibility: visible;
}
/* CSS3 Drop Down Menu by Ajatshare*/
Read more: http://
ajatshare.blogspot.com/2013/09/cara-
membuat-css3-drop-down-menu.html#
ixzz2vLiBlKTX
Tahap 2
1.Masuk ke tata letak
2. pilih Gadget dibawah header<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="http://
powerfull88.blogspot.com/2014/03/
bla.html">Bla</a></li>
<li><a href="#">Sub Page #2</a></li>
<li><a href="#">Sub Page #3</a></li>
<li><a href="#">Sub Page #4</a></li>
<li><a href="#">Sub Page #5</a></li>
</ul>
</li>
<ul>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Sub Page #1</a></li>
<li><a href="#">Sub Page #2</a></li>
<li><a href="#">Sub Page #3</a></li>
<li><a href="#">Sub Page #4</a></li>
<li><a href="#">Sub Page #5</a></li>
</ul>
</li>
<ul>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Sub Page #1</a></li>
<li><a href="#">Sub Page #2</a></li>
<li><a href="#">Sub Page #3</a></li>
<li><a href="#">Sub Page #4</a></li>
<li><a href="#">Sub Page #5</a></li>
</ul>
</li>
<ul>
<li><a href="#">Sitemap</a>
<ul>
<li><a href="#">Sub Page #1</a></li>
<li><a href="#">Sub Page #2</a></li>
<li><a href="#">Sub Page #3</a></li>
<li><a href="#">Sub Page #4</a></li>
<li><a href="#">Sub Page #5</a></li>
</ul>
</li>
<ul>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Sub Page #1</a></li>
<li><a href="#">Sub Page #2</a></li>
<li><a href="#">Sub Page #3</a></li>
<li><a href="#">Sub Page #4</a></li>
<li><a href="#">Sub Page #5</a></li>
</ul>
</li>
<ul>
<li><a href="#">Create This</a>
<ul>
<li><a href="#">Sub Page #1</a></li>
<li><a href="#">Sub Page #2</a></li>
<li><a href="#">Sub Page #3</a></li>
<li><a href="#">Sub Page #4</a></li>
<li><a href="#">Sub Page #5</a></li>
</ul>
</li>
<ul>
<li><a href="#">Geografi</a>
<ul>
<li><a href="#">Sub Page #1</a></li>
<li><a href="#">Sub Page #2</a></li>
<li><a href="#">Sub Page #3</a></li>
<li><a href="#">Sub Page #4</a></li>
<li><a href="#">Sub Page #5</a></li>
</ul>
</li>
<ul>
<li><a href="#">Agama</a>
<ul>
<li><a href="#">Sub Page #1</a></li>
<li><a href="#">Sub Page #2</a></li>
<li><a href="#">Sub Page #3</a></li>
<li><a href="#">Sub Page #4</a></li>
<li><a href="#">Sub Page #5</a></li>
</ul>
</li>
</ul></ul></ul></ul></ul></ul></ul></ul></
div>
3. copy code diatas dan simpan.
dan lihat hasilnya

Semoga bermanfaat :)