MENU VERTICAL SLIDE

DROP DOWN MULTI SUB MENU
 <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>

Nah untuk cara pemasangannya sebagai berikut
  • Masuk ke Blog Sobat
  • Klik Rancangan pilih tambah Gadget HTML/Javascript
  • Copy kode CSS nya Rubah nama menunya dan Alamat URLnya
  • Rubah Kode Warna biru 150px Untuk menyesuaikan lebarnya, dan Bila ingin menaruhnya di Sidebar sebelah kanan Cari Kode left Ganti dengan right
  • Biar Tambah Cantik Utak-atik Pada Font teksnya juga Kode-kode Warnanya
  • Lalu simpan dan letakan dibagian Sidebar left Blog Sobat

Abi Andaya Iswara

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

Tidak ada komentar:

Posting Komentar

Terima kasih. BY Mixland Blog.