Sidebar Slide Menu Sidebar Slide Menu

Demonnya

• Types
  
  • European
  • Indian
  • North Africa
  • American >
    
    • South American
    • North American
      
      • Grey tree frog
      • Green tree frog
      • Spring peeper
  • Japanese
  • Chinese
• Classifications
  
  • Pelodryadinae >
    
    • Cyclorana
    • Litoria
    • Nyctimystes
  • Phyllomedusinae >
    
    • Agalychnis
    • Cruziohyla
    • Hylomantis
    • Pachymedusa
    • Phasmahyla
    • Phrynomedusa
    • Phyllomedusa
  • Hemiphractinae >
    
    • Cryptobatrachus
    • Flectonotus
    • Gastrotheca
    • Hemiphractus
    • Stefania
  • Hylinae >
    • Acris
    • Anotheca
    • Bokermannohyla
    • Corythomantis
    • Ecnomiohyla
    • Hyloscirtus
    • Megastomatohyla
    • Osteocephalus
    • Pseudacris
    • Sphaenorhynchus
    • Trachycephalus
    
    
  • Rhacophorinae >
    
    • Boophis
    • Callixalus
    • Chiromantis
    • Cryptothylax
    • Mantidactylus
    • Rhacophorus
  • Buergeriinae >
    
    • Buergeria
• References
  
  • Wikipedia
  • Encyclopedia
• Links
  
  • Complete treefrogs
  • Old World treefrogs
  • Amphibian Species

Selamat beraktifitas Sobat , semoga dalam keadaan sehat semuanya.
Masih juga tentang CSS terus yang ane Share kali ini .
Semoga saja sobat kagak bosen ngeiat potingan ane yang melulu ngehadirin CSS doang.
Nah untuk contohnya Arahkan cursor Sobat pada demo disamping

Kode CSSnya

  <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>

Cara pemasanganya sebagai berikut

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

Menu-Menu Lainnya

CSS Menu Drop Down
CSS Right Flayout Menu 
CSS Left Flayout Menu
 CSS Menu Drop Down Multi Sub Menu
CSS Menu Pull UP Multi Sub Menu
CSS Animasi Menu Pull Up
CSS menu drop down melayang
CSS Menu Horisontal
CSS Menu Button 
CSS Tab Menu View Tanpa Edit HTML