1. Masuk ke blog kamu
2. Klik Tata Letak 
3. Pilih Tambah Gadget HTML/Javascript
4. Copy kode CSS nya dan uubah nama menunya dan alamat URLnya
5. Ubah kode warna biru 150px Untuk menyesuaikan lebarnya, dan bila ingin menaruhnya di sidebar sebelah kanan cari kode left ganti dengan right
6. Biar tambah cantik utak-atik pada font teksnya juga kode-kode warnanya
7. Lalu simpan dan letakan dibagian sidebar left blog sobat

<style type="text/css">
/* ======================
Original : www.stunicholls.com
Salam hangat & happy Blogging buat Sahabat semua.
Don't Remove This Text
====================== */
#nav { position:relative;}
#menu {list-style-type:none; padding:0; margin:0; width:150px; position:absolute; top:0;z-index:100;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#000000; position:relative; -moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; border:6px groove #6E6E6E;}
#menu li.sub {background:background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));}
#menu li, #menu li a {display:block; color:#fff; font-family:Comic Sans MS; font-size:12px; line-height:18px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-indent:5px;}
#menu ul,
#menu li:hover ul ul,
#menu li:hover ul li:hover ul ul {display:none;}
#menu li:hover {color:#FF0000; z-index:500;}
#menu li:hover ul {display:block; height:150px;}
#menu li:hover ul li:hover ul,
#menu li:hover ul li:hover ul li:hover ul {display:block; position:absolute; left:110px; height:auto;}
#menu li:hover ul li.fly {background: #000000;}
#menu li:hover ul li:hover {background:#FF0000;}
#menu li:hover ul li:hover ul li {background:background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));}
#menu li:hover ul li:hover ul li.hover ul li {background:#780; z-index:500;}
#menu li:hover ul li:hover ul li.fly {background: background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)) ;}
#menu li:hover ul li:hover ul li:hover {z-index:500; background:#FF0000;}
#menu li:hover ul li:hover ul li:hover a {color:#fff;}
#menu li:hover ul li:hover ul li:hover ul li:hover {background:#FF0000;}
#menu li:hover ul li:hover ul li.hover ul li:hover a {color:#fff;}
#nav img {display:block; float:left;}
#nav p {margin:0px; padding:17px 0 0 0; color:#000; font-size:12px; font-family:Comic Sans MS; text-align:justify;}
</style>

<div id="nav">
<ul id="menu">
<li class="sub">Types
<ul>
<li><a href="http://www.blogger.com/">European</a></li>
<li><a href="http://www.blogger.com/">Indian</a></li>
<li><a href="http://www.blogger.com/">North Africa</a></li>
<li class="fly"><a href="http://www.blogger.com/">American &gt;</a>
<ul>
<li><a href="http://www.blogger.com/">South American</a></li>
<li class="fly"><a href="http://www.blogger.com/">North American</a>
<ul>
<li><a href="http://www.blogger.com/">Grey tree frog</a></li>
<li><a href="http://www.blogger.com/">Green tree frog</a></li>
<li><a href="http://www.blogger.com/">Spring peeper</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.blogger.com/">Japanese</a></li>
<li><a href="http://www.blogger.com/">Chinese </a></li>
</ul>
</li>
<li class="sub">Classifications
<ul>
<li class="fly"><a href="http://www.blogger.com/">Pelodryadinae &gt;</a>
<ul>
<li><a href="http://www.blogger.com/">Cyclorana</a></li>
<li><a href="http://www.blogger.com/">Litoria</a></li>
<li><a href="http://www.blogger.com/">Nyctimystes</a></li>
</ul>
</li>
<li class="fly"><a href="http://www.blogger.com/">Phyllomedusinae &gt;</a>
<ul>
<li><a href="http://www.blogger.com/">Agalychnis</a></li>
<li><a href="http://www.blogger.com/">Cruziohyla</a></li>
<li><a href="http://www.blogger.com/">Hylomantis</a></li>
<li><a href="http://www.blogger.com/">Pachymedusa</a></li>
<li><a href="http://www.blogger.com/">Phasmahyla</a></li>
<li><a href="http://www.blogger.com/">Phrynomedusa</a></li>
<li><a href="http://www.blogger.com/">Phyllomedusa</a></li>
</ul>
</li>
<li class="fly"><a href="http://www.blogger.com/">Hemiphractinae &gt;</a>
<ul>
<li><a href="http://www.blogger.com/">Cryptobatrachus</a></li>
<li><a href="http://www.blogger.com/">Flectonotus</a></li>
<li><a href="http://www.blogger.com/">Gastrotheca</a></li>
<li><a href="http://www.blogger.com/">Hemiphractus</a></li>
<li><a href="http://www.blogger.com/">Stefania</a></li>
</ul>
</li>
<li class="fly"><a href="http://www.blogger.com/">Hylinae &gt;</a><ul>
<li><a href="http://www.blogger.com/">Acris</a></li>
<li><a href="http://www.blogger.com/">Anotheca</a></li>
<li><a href="http://www.blogger.com/">Bokermannohyla</a></li>
<li><a href="http://www.blogger.com/">Corythomantis</a></li>
<li><a href="http://www.blogger.com/">Ecnomiohyla</a></li>
<li><a href="http://www.blogger.com/">Hyloscirtus</a></li>
<li><a href="http://www.blogger.com/">Megastomatohyla</a></li>
<li><a href="http://www.blogger.com/">Osteocephalus</a></li>
<li><a href="http://www.blogger.com/">Pseudacris</a></li>
<li><a href="http://www.blogger.com/">Sphaenorhynchus</a></li>
<li><a href="http://www.blogger.com/">Trachycephalus</a></li>
</ul>
</li>
<li class="fly"><a href="http://www.blogger.com/">Rhacophorinae &gt;</a>
<ul>
<li><a href="http://www.blogger.com/">Boophis</a></li>
<li><a href="http://www.blogger.com/">Callixalus</a></li>
<li><a href="http://www.blogger.com/">Chiromantis</a></li>
<li><a href="http://www.blogger.com/">Cryptothylax</a></li>
<li><a href="http://www.blogger.com/">Mantidactylus</a></li>
<li><a href="http://www.blogger.com/">Rhacophorus</a></li>
</ul>
</li>
<li class="fly"><a href="http://www.blogger.com/">Buergeriinae &gt;</a>
<ul>
<li><a href="http://www.blogger.com/">Buergeria</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub">References
<ul>
<li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
<li><a href="http://www.blogger.com/">Encyclopedia</a></li>
</ul>
</li>
<li class="sub">Links
<ul>
<li><a href="http://www.blogger.com/">Complete treefrogs </a></li>
<li><a href="http://www.blogger.com/">Old World treefrogs</a></li>
<li><a href="http://www.blogger.com/">Amphibian Species</a></li>
</ul>
</li>
</ul>