Cara membuat menu navigasi dropdown

Menu navigasi adalah, sebuah menu yang berada dibawah/diatas header (Biasanya) yang berguna untuk menuju kesuatu link. Pasti sobat" disini sudah tidak asing lagi kan? Soalnya hampir disetiap blog ada navigasinya atau mungkin semuanya ada. Kalau memang sudah tidak asing, bagaimana dengan yang dropdown? Masih sedikit asing kan? Langsung aja keinti. Disini saya mau kasih Tutor cara membuat menu navigasi dropdown.

1. Login keAkun blogger sobat.

2. Copas kode dibawah ini dibawah code <div id="outer-wrapper"> / dimana saja.

<div id='menu'>
<ul id='menu'>
<li><a href="#">About Me</a>
<ul>
<li><a href="#">Saya</a></li>
<li><a href="#">Sejarah blog ini</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Mail</a></li>
</ul>
</li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Tutorial Blog</a></li>
</ul>
</li>
<li><a href="#">Informasi/Berita</a>
<ul>
<li><a href="#">Politik</a></li>
<li><a href="#">Peristiwa</a></li>
<li><a href="#">News</a></li>
</ul>
</li>
<li><a href="#">Resep</a>
<ul>
<li><a href="#">Kueh</a></li>
<li><a href="#">Sop</a></li>
<li><a href="#">Daging</a></li>
</ul>
</li>
<li><a href="#">Game</a>
<ul>
<li><a href="#">Lostsaga</a></li>
<li><a href="#">Point Blank</a></li>
<li><a href="#">Godswar</a></li>
</ul>
</li>
<li><a href="#">Download</a>
<ul>
<li><a href="#">Antivirus</a></li>
<li><a href="#">Microsoft</a></li>
<li><a href="#">Office</a></li>
</ul>
</li>
<li><a href="#">Cheat</a>
<ul>
<li><a href="#">Lostsaga</a></li>
<li><a href="#">PB</a></li>
<li><a href="#">Grandchase</a></li>
</ul>
</li>
</ul>
</div>

NB: Ganti kode "#" dengan link sobat, ganti teks merah dengan judul tampilan link/apa saja. Teks hijau merupakan judul menu dropdown, bisa diganti.

3. Lalu cari kode ]]></b:skin> lalu letakan kode dibawah ini tepat diatas kode ]]></b:skin>

#menu ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
float: left;
display: block;
}
#menu li ul {
display: none;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #fff;
padding:5px 15px 5px 15px;
background:#ccc;
margin:1px;
white-space: nowrap;
}
#menu ul li a:hover {
background:#000;
}
#menu li:hover ul {
display: block;
position: absolute;
}
#menu li:hover li {
float: none;
font-size: 14px;