Memasang Menu Drop Down

Menu Drop down berfungsi untuk membuat menu
tanpa harus memakan banyak tempat, berikut cara memasang menu tersebut.
Login ke akun blog klik tatletak klik tambah gadged
copy code dibawah ini letakan kedalam gadged tersebut klik simpan selesai

<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 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);

}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu 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;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu 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;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu 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);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu 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;
}
#menu 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;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='http://myscript2010s.blogspot.co.id/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiao5bxLqHJnLJhfsah6b9hNh1jZLEn014O2vKiVPU_we0JCGNL_c3VLq_agxJVkbBG4M77L7cEJy2fCqAyMq2ynPl5VqkwfXpOgLbi0mkbEKsfzb8aqvr9P8ZsnpFTwWj0Uvey3WFSI/s1600-r/button-mys2010.png" name="e902" border="0" width="28" height="29" /></a>

</li>
<li><a href='http://myscript2010s.blogspot.co.id/' rel='nofollow'>Drop menu a</a>
<ul>
<li><a href=' #/ ' rel='dofollow'>Menu a1</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu a2</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu a3</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu a4</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu a5</a></li>
</ul>
</li>
<li><a href='http://myscript2010s.blogspot.co.id/' rel='nofollow'>Drop menu b</a>
<ul>
<li><a href=' #/ ' rel='dofollow'>Menu b1</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b2</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b3 next</a>
<ul>
<li><a href=' #/ ' rel='dofollow'>Menu b3.1</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b3.2</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b3.3</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b3.4</a></li>
</ul>
</li>
<li><a href='http://myscript2010s.blogspot.co.id/' rel='dofollow'>Menu c</a></li>
<li><a href= rel='dofollow'>Menu d</a></li>
</ul>
</li>
<li><a href='http://myscript2010s.blogspot.co.id/' rel='nofollow'>Drop menu c</a>
<ul>
<li><a href=' #/ ' rel='dofollow'>Menu c1</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu c2</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu c3</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu c4</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu c5</a></li>
</ul>
</li>
<a href='http://myscript2010s.blogspot.co.id/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiao5bxLqHJnLJhfsah6b9hNh1jZLEn014O2vKiVPU_we0JCGNL_c3VLq_agxJVkbBG4M77L7cEJy2fCqAyMq2ynPl5VqkwfXpOgLbi0mkbEKsfzb8aqvr9P8ZsnpFTwWj0Uvey3WFSI/s1600-r/button-mys2010.png" name="e902" border="0" width="28" height="29" /></a></ul>

Penjelasan : Ganti tanda yang berwarna orange dengan link sobat

All Sources
Edited by. Myscript2010

Demo Show