Showing posts with label SCRIPT. Show all posts
Showing posts with label SCRIPT. Show all posts

TAB BARU YANG EKSENTRIK


Untuk membuat tab baru dengan gaya yang exelent mungkin perlu dicoba bagi kalian yang menginginkan blognya terkesan eksentrik. nah dibawah ini adalah SCRIPTNYA. LETAKAN script dipostingan blog DALAM MODE HTML (BUKAN COMPOSE).
INI SCRIPTNYA :

<script type="text/javascript">
<!--
var winheight=100
var winsize=100
var x=5
function openwindow(thelocation){
temploc=thelocation
if (!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementById)){
window.open(thelocation)
return
}
win2=window.open("","","scrollbars")
win2.moveTo(0,0)
win2.resizeTo(100,100)
go2()
}
function go2(){
if (winheight>=screen.availHeight-3)
x=0
win2.resizeBy(5,x)
winheight+=5
winsize+=5
if (winsize>=screen.width-5){
win2.location=temploc
winheight=100
winsize=100
x=2
return
}
setTimeout("go2()",50)
}
//-->
</script>

<br />
<div style="font-family: verdana; text-align: center;">
<span style="font-size: 40px;"><a href="javascript:openwindow('URL')">CONTOH MEMBUAT TAB BARU </a>
</span> </div>

KET: Untuk yang warna MERAH anda ganti dengan link yang ingin anda tautkan

          Untuk yang warna KUNING BISA ANDA GANTI DENGAN TULISAN YG ANDA        INGINKAN.
UNTUK DEMONYA COBA ANDA KLIK TULISAN WARNA  MERAH DIBAWAH INI


CONTOH baground postingan bergambar

inilah contoh postingan yang bagroundnya bergambar

CARA MENGHAPUS KOLOM KOMENTAR DI BLOG


Silakan ikuti langkah-langkah di bawah ini untuk menghilangkan kolom komentar blog . .
1. Masuk ke akun blogger saudara
2. Pilih blog yang ingin anda hapus kotak komentarnya
3. Masuk ke menu template, kemudian klik "EDIT HTML"
4. Kemudian cari kode berikut (Tekan Ctrl+F) lalu Hapus kode-nya :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
5. Klik Simpan 

2. Menyembunyikan Kotak Komentar di Blog

Jika cara di atas tidak berhasil maka anda bisa mencoba cara yang satu ini. Anda bisa menyembunyikan atau meng-hidden kolom komentar dan beserta komentar-komentar yang sudah ada sebelumnya. Langsung saja silahkan ikuti langkah-langkah sederhana berikut ini :
  • Login dengan akun blogspot saudara.
  • Pilih blog yang mau saudara edit.
  • Pilih menu setelan lalu klik Pos dan Komentar
  • Pada Lokasi Komentar pilih opsi sembunyikan. 
  • Kemudian simpan setelan.
Semoga artikel sederhana ini bermanfaat bagi anda semua yang membutuhkan.

MENCEGAH DIRECT



kali ini bagi agan-agan yang mengalami REDIRECT blognya dari domain COM lalu tiba-tiba berubah menjadi CO.ID bisa mencoba trik berikut ini :
PERTAMA
Masuk kemenu TEMPLATE----->EDIT HTML---> cari kode <head>
laluh taruh scrip dibawah ini TEPAT DIBAWAH KODE tersebut. ini kodenya :

<script type='text/javascript'>
var str=window.location.href.toString();if("-1"==str.indexOf(".com/")){var str1=str.substring(str.lastIndexOf(".blogspot."));if("-1"==str1.indexOf("/"))var str2=str1;else var str2=str1.substring(0,str1.indexOf("/")+1);window.location.href=window.location.href.toString().replace(str2,".blogspot.com/ncr/")}

</script>

kemudian jangan lupa KLIK SIMPAT TEMPLATE........SELESAI SUDAH

DROPDOWN MELAYANG
BannerFans.com

cara membuat menu dropdown melayang di blog.

1. Login ke blogger => Rancangan => edit HTML
2. Bagi sobat yang belum menggunakan menu dropdown, atau di blognya belum menggunakan menu horizontal, silahkan copy kode CSS di bawah ini jangan lupa tempatkan kode tersebut di atas
 ]]></b:skin>

#NavbarMenu {background: #000;width: 400px;height: 10px;font-size: 11px;font-family: Trebuchet MS, Tahoma, Verdana;color: #fff;margin: 0px;padding: 0px;}
#NavbarMenuleft {width: 400px;float: left;margin: 0;padding: 0;}
#nav {margin: 0;padding: 0;}
#nav ul {float: left;list-style: none;margin: 0;padding: 0;}
#nav li {list-style: none;margin: 0;padding: 0;}
#nav li a, #nav li a:link, #nav li a:visited {background: #222222;height: 15px;color: #fff;display: block;font-size: 11px;font-family: trebuchet ms, ;text-transform: none;text-decoration: none;margin: 0;padding-top:6px;padding-bottom:5px;padding-left:13px;padding-right:13px;border-right: 1px solid #000;}
#nav li a:hover, #nav li a:active {background: #7f7f7f;color: #222222;margin: 0;padding-top:6px;padding-bottom:5px;padding-left:13px;padding-right:13px;text-decoration: none;}
#nav li li a, #nav li li a:link, #nav li li a:visited {background: #7f7f7f;width: 150px;color: #fffff;font-size: 11px; font-family:trebuchet ms,;font-weight:strong;text-transform: none;float: none;margin: 0;padding: 7px 10px;border: 1px solid #000;}
#nav li li a:hover, #nav li li a:active {background: #222222;color: #7f7f7f;padding: 7px 10px;}
#nav li {float: left;padding: 0;}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;}
#nav li ul a {width: 140px;}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}

3. Kemudian simpan tamplate

4. Klik elemen halaman => tambah gatget => pilih HTML/Javascript lalu copy paste kode di bawah ini

<style type="text/css">#gb{position:fixed;top:0px;z-index:+1500;}* html #gb{position:relative;}.gbcontent{float:right;background:#fff;padding:1px;}</style><script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir-100;gb.style.top = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script><div id="gb"><div class="gbtab" onclick="showHideGB()"></div><div class="gbcontent"><div class="menuhorisontal"><ul id="nav"><li><a href="#">Home</a></li> 
<li><a href="#">Profil</a></li>
<li><a href="#">Kontak</a></li>
       <li><a href="#">Photoshop</a></li> 
<li><a href="#">CorelDraw</a></li>
<li><a href="#">Trik Internet</a><ul><li><a href="#">Download</a></li></ul></li><li><a href="#">Softwere</a></li><li><a href="#"> Blogger</a><ul><li><a href="#">Artikel</a></li><li><a href="#">Daftar Isi</a></li><li><a href="#">Cek Berat Blog</a></li><li><a href="#">Parse HTML Blogger</a></li><li><a href="#">Tukar Link</a></li></ul></li><li><li><a href="#">GuestBook</a></li><li><a href="#">TV Online</a><ul><li><a href="#">Global TV</a></li><li><a href="#">MNC TV</a></li><li><a href="#">Game Online</a></li><li><a href="#">Photoshop Online</a></li></ul></li></li></ul></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.center = (20-gb.offsetWidth).toString() + "px";</script></div></div>
SILAHKAN SOBAT GANTI TANDA # DENGAN URL SOBAT. 
SELAMAT MENCOBA DAN SUKSES SELALU



SCRIPT HORISONTAL CSS3 MENU

1. Login ke akun blogger sobat 2. Klik Rancangan --> Edit HTML 3. Letakkan kode berikut di atas kode ]]>




Catatan: Sesuaikan kode angka yang berwarna biru dengan ukuran template. 4. Klik save dan lanjut ke tahap ke 2. 5. Klik Rancangan --> Elemen laman 6. Klik Tambah Gadget tepat di bawah header dan kemudian pilih HTML/Javascript.. 7. Masukkan kode berikut kedalam kotak HTML/Javascript.





Catatan: Sesuaikan kode angka yang berwarna biru dengan ukuran template. 4. Klik save dan lanjut ke tahap ke 2. 5. Klik Rancangan --> Elemen laman 6. Klik Tambah Gadget tepat di bawah header dan kemudian pilih HTML/Javascript.. 7. Masukkan kode berikut kedalam kotak HTML/Javascript.


SCRIPT BUTTON TABLE***
Blinkie Text Generator at TextSpace.net

<style type="text/css">
.binkbenks_question{ /* Styling question */
 /* Start layout CSS */
 color:#FFF;
 font-size:0.9em;
 background-color:#317082;
 width:auto;
 margin-bottom:2px;
 margin-top:2px;
 padding-left:2px;
 -moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; background-color: 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)); 
 border-color: #BDBDBD; border-style: groove; border-width: 4px;font-family: Comic Sans MS;font-size: 16px; text-align:center;
 height:20px;

 /* End layout CSS */

 overflow:hidden;
 cursor:pointer;
}
.binkbenks_answer{ /* Parent box of slide down content */
 /* Start layout CSS */
 -moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px;
 border-color: #BDBDBD; 
 border-style: inset; 
 border-width: 2px;
 background:#151515 url(http://i1206.photobucket.com/albums/bb455/binkbenk/AlienLogo.png)no-repeat center;
 width:auto;
 font-family: Segoe Script;
 font-size: 14px; 
 text-align: left;

 /* End layout CSS */

 visibility:hidden;
 height:0px;
 overflow:hidden;
 position:relative;

}
.binkbenks_answer_content{ /* Content that is slided down */
 padding:1px;
 font-size:0.9em;
 position:relative;
}
</style>
<script type="text/javascript">
var binkbenks_slideSpeed = 20; // Higher value = faster
var binkbenks_timer = 10; // Lower value = faster

var objectIdToSlideDown = false;
var binkbenks_activeId = false;
var binkbenks_slideInProgress = false;
var binkbenks_slideInProgress = false;
var binkbenks_expandMultiple = false; // true if you want to be able to have multiple items expanded at the same time.

function showHideContent(e,inputId)
{
 if(binkbenks_slideInProgress)return;
 binkbenks_slideInProgress = true;
 if(!inputId)inputId = this.id;
 inputId = inputId + '';
 var numericId = inputId.replace(/[^0-9]/g,'');
 var answerDiv = document.getElementById('binkbenks_a' + numericId);

 objectIdToSlideDown = false;

 if(!answerDiv.style.display || answerDiv.style.display=='none'){
  if(binkbenks_activeId &&  binkbenks_activeId!=numericId && !binkbenks_expandMultiple){
   objectIdToSlideDown = numericId;
   slideContent(binkbenks_activeId,(binkbenks_slideSpeed*-1));
  }else{

   answerDiv.style.display='block';
   answerDiv.style.visibility = 'visible';

   slideContent(numericId,binkbenks_slideSpeed);
  }
 }else{
  slideContent(numericId,(binkbenks_slideSpeed*-1));
  binkbenks_activeId = false;
 }
}

function slideContent(inputId,direction)
{

 var obj =document.getElementById('binkbenks_a' + inputId);
 var contentObj = document.getElementById('binkbenks_ac' + inputId);
 height = obj.clientHeight;
 if(height==0)height = obj.offsetHeight;
 height = height + direction;
 rerunFunction = true;
 if(height>contentObj.offsetHeight){
  height = contentObj.offsetHeight;
  rerunFunction = false;
 }
 if(height<=1){
  height = 1;
  rerunFunction = false;
 }

 obj.style.height = height + 'px';
 var topPos = height - contentObj.offsetHeight;
 if(topPos>0)topPos=0;
 contentObj.style.top = topPos + 'px';
 if(rerunFunction){
  setTimeout('slideContent(' + inputId + ',' + direction + ')',binkbenks_timer);
 }else{
  if(height<=1){
   obj.style.display='none';
   if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
    document.getElementById('binkbenks_a' + objectIdToSlideDown).style.display='block';
    document.getElementById('binkbenks_a' + objectIdToSlideDown).style.visibility='visible';
    slideContent(objectIdToSlideDown,binkbenks_slideSpeed);
   }else{
    binkbenks_slideInProgress = false;
   }
  }else{
   binkbenks_activeId = inputId;
   binkbenks_slideInProgress = false;
  }
 }
}



function initShowHideDivs()
{
 var divs = document.getElementsByTagName('DIV');
 var divCounter = 1;
 for(var no=0;no<divs.length;no++){
  if(divs[no].className=='binkbenks_question'){
   divs[no].onclick = showHideContent;
   divs[no].id = 'binkbenks_q'+divCounter;
   var answer = divs[no].nextSibling;
   while(answer && answer.tagName!='DIV'){
    answer = answer.nextSibling;
   }
   answer.id = 'binkbenks_a'+divCounter;
   contentDiv = answer.getElementsByTagName('DIV')[0];
   contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
   contentDiv.className='binkbenks_answer_content';
   contentDiv.id = 'binkbenks_ac' + divCounter;
   answer.style.display='none';
   answer.style.height='1px';
   divCounter++;
  }
 }
}
window.onload = initShowHideDivs;
</script>

<div class="binkbenks_question">

@Theme Windows Xplore</div>
<div class="binkbenks_answer">

<div>

<ul>
<li><a href="http://blogloecooy.com/">black theme</a></li>
<li><a href="http://blogloecooy.com/">red theme</a></li>
<li><a href="http://blogloecooy.com/">blue theme</a></li>
<li><a href="http://blogloecooy.com/">yellow theme</a></li>
<li><a href="http://blogloecooy.com/">green theme</a></li>
<li><a href="http://blogloecooy.com/">dark theme</a></li>
<li><a href="http://blogloecooy.com/">sexy theme</a></li>
</ul>
</div>
</div>
<div class="binkbenks_question">

@Tebak-tebakan Narsis </div>
<div class="binkbenks_answer">

<div>

<ul>
<li><a href="http://blogloecooy.com/">jablay gila</a></li>
<li><a href="http://blogloecooy.com/">jomblo gila</a></li>
<li><a href="http://blogloecooy.com/">stress gila</a></li>
<li><a href="http://blogloecooy.com/">balap gila</a></li>
<li><a href="http://blogloecooy.com/">nangis gila</a></li>
<li><a href="http://blogloecooy.com/">susah gila</a></li>
</ul>
</div>
</div>
<div class="binkbenks_question">

@Tips & Tricks</div>
<div class="binkbenks_answer">

<div>

<ul>
<li><a href="http://blogloecooy.com/">Tips & Tricks merayu</a></li>
<li><a href="http://blogloecooy.com/">Tips & Tricks menipu</a></li>
<li><a href="http://blogloecooy.com/">Tips & Tricks menggauli</a></li>
<li><a href="http://blogloecooy.com/">Tips & Tricks Merangsang</a></li>
<li><a href="http://blogloecooy.com/">Tips & Tricks bercinta</a></li>
<li><a href="http://blogloecooy.com/">Tips & Tricks gila</a></li>
</ul>
</div>
</div>

SCRIPT ZODIAC DAN SHIO




TOMBOL SHOW/HIDE

Kali kesekian saya memberikan tutorial tentang tombol button. pada postingan kali ini saya beri judul tombol show dan hide.Fungsinys adalah menampakan dan menyembunyikan tulisan atau artikel.Untuk demonya coba sobat lihat tabel di bawah ini,lalu klik. ya seperti itulah cara kerjanya tombol show dan hide ini. jika tertarik boleh sobat copy scriptnya.peletakannya bisa diwidget atau postingan.SELAMAT MENCOBA DAN SUKSES SELALU


Klik tombol--->>>show / hide untuk melihat--->>>
BELAJAR BLOG DENGAN BLOG GO BLOG







BUKU TAMU

pada blog ini,sobat bisa melihat sebuah buku tamu yang berada disebelah kanan atas.untuk membuat buku tamu ini sobat harus punya acount di hostting chat. setelah login anda akan mendapat kode/script dari hostting chatt tempat anda login tadi. nah kodeh itulah yang nanti harus sobat sisipkan dalam script membuat kode buku tamu tersebut. nah dibawah ini merupakan script buku tamu yang sama seperti yang ad diblog ini.penempatannya pada widget.SELAMAT MENCOBA DAN SUKSES SELALU!!!



<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJGo8VpN4HJpdH6bnkzr4Q11J0zhKiIZNNpohR9q9k-LXTeBQ8ZY2QRb9WFWYulVI6aFB8xcYBFDUZOP46nBIn0E91T9-F3Ih_Zu0l7rqoZiCl4ToY27j1jztnN5qU-nVYpu-7uwXkQQ9/s1600/buku+tamu.png') no-repeat; } .gbcontent{ float:left; border:1px solid #B3B3B3; background:#E6E6E6; padding:5px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent">   <!-- BEGIN CBOX - www.cbox.ws - v001 --><!-- BEGIN CBOX - www.cbox.ws - v3 -->KODE SCRIPT DARI CBOX TARUH DISINI<!-- END CBOX --> <!-- END CBOX --><a href="javascript:showHideGB()"> [hide] </a> </div> </div><script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>




SCRIPT TABLE POST

drop down melayang

sobat!! dalam postingan ini saya coba untuk kembali menampilkan DAFTAR MENU DROPDoWN. menu ini menampilkan daftar menu dan sub menunya. disini sobat bisa mengotak atik dari scriptnya untuk mengurangi atau menambah serta meletakan posi menu tersebut. sebaga contohnya sobat bisa melihat dafta menu paling atas warna background hitam pada blog ini.beginilah tampilan dari daftar menu dropdown ini nantinya.apa anda tertarik untuk memakainya diblog sobat?? oke silahkan sobat copy script dbawah ini kemudian pastekan pada :


Edit html--->>tata letak--->>tambah widget--->>pilih java script/html--->>letakan kodenya--->>lalu save.






SCRIPT BUTTON TABLE

<div style="text-align: center;"> 
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'CLOSE COY !'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'OPEN KONTEN'; }" type="button" value="OPEN KONTEN" class='buttons'/></div>
<div class="konten">
<div style="display: none;" class='isi-spoiler'>1. COMPUTER<br />2. SOURCE SCRIPT<br />3. MENGENAI KOMPUTER<br />4.<br />5.<br />6.<br />7.<br />8.<br />9.<br />10.</div>
</div>

<style>
/*SPOILER CUSTOM*/
.buttons{background:#555;border-radius:4px;border-radius:2px solid #ddd;box-shadow:0 0 0 1px #555;font:bold 14px Verdana;color:#ddd;padding:4px;
}
.buttons:hover{background:#b00;color:#fff;cursor:pointer;box-shadow:0 0 0 1px #555,0 0 5px #000
}
.konten{width:100%;margin:5px auto 0;
}
.isi-spoiler{width:auto;background:#999;border-radius:5px;border:2px solid #fff;box-shadow:0 0 0 1px #888,inset 0 0 0 1px #888;font:12px Verdana;color:#fff;padding:10px;
}
</style>

script daftar isi blog

<center>
<div style="border: 4px outset rgb(0, 0, 0); height: 200px; overflow: auto;">
<link href="http://blogdaftarisi.googlecode.com/files/acc-toc.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://blogdaftarisi.googlecode.com/files/toc.js">
</script>
<script src="#/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
</div>
</center>

Nb : Tanda # ISI ALAMAT/URL SITUS ANDA. dan yang warna hijau  JANGAN DIHAPUS(BIARKAN SAJA)
angka 200px adalah tingginya bisa anda rubah.

SCRIPT VERTIKAL 1


<center>
<style type="text/css">
#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 class="fly"><a href="#">Link 1 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul>
</li>
<li class="fly"><a href="#">Link 2 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 3 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 4 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 5 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 1 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul>
</li>
<li class="fly"><a href="#">Link 2 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 3 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 4 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 5 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">WARNA &gt;</a>
<ul>
<li><a href="#">WARNA MERAH &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul>
</li>

<li class="fly"><a href="#">WARNA PUTIH &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul>
</li>
</ul>
</li>
<li class="fly"><a href="#">Link 1 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul>
</li>
<li class="fly"><a href="#">Link 2 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 3 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 4 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 5 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 6 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 7 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 8 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 9 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
<li class="fly"><a href="#">Link 10 &gt;</a>
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
<li><a href="#">Menu D</a></li>
<li><a href="#">Menu E</a></li>
<li><a href="#">Menu F</a></li>
<li><a href="#">Menu G</a></li>
<li><a href="#">Menu H</a></li>
<li><a href="#">Menu I</a></li>
<li><a href="#">Menu J</a></li>
<li><a href="#">Menu K</a></li>
<li><a href="#">Menu L</a></li>
</ul></li>
</ul>
</li>
<li class="sub">DAFTAR/BERMACAM
<ul>
<li class="fly"><a href="#">BERMACAM-MACAM &gt;</a>
<ul>
<li><a href="#">BERMACAM-MACAM 1</a></li>
<li><a href="#">BERMACAM-MACAM 2</a></li>
<li><a href="#">BEMACAM-MACAM 3</a></li>
<li><a href="#">BERMACAM-MACAM 4</a></li>
<li><a href="#">BERMACAM-MACAM 5</a></li>
<li><a href="#">BERMACAM-MACAM 6</a></li>
<li><a href="#">BERMACAM-MACAM 7</a></li>
<li><a href="#">BERMACAM-MACAM 8</a></li>
<li><a href="#">BERMACAM-MACAM 9</a></li>
<li><a href="#">BERMACAM-MACAM 10</a></li>
<li><a href="#">BERMACAM-MACAM 11</a></li>
<li><a href="#">BERMACAM-MACAM 12</a></li>
<li><a href="#">BERMACAM-MACAM 13</a></li>
<li><a href="#">BERMACAM-MACAM 14</a></li>
<li><a href="#">BERMACAM-MACAM 15</a></li>
<li><a href="#">BERMACAM-MACAM 16</a></li>
<li><a href="#">BERMACAM-MACAM 17</a></li>
<li><a href="#">BERMACAM-MACAM 18</a></li>
<li><a href="#">BERMACAM-MACAM 19</a></li>
<li><a href="#">BERMACAM-MACAM 20</a></li>
</ul>
</li>
<li class="fly"><a href="#">DAFTAR &gt;</a>
<ul>
<li><a href="#">DAFTAR 1</a></li>
<li><a href="#">DAFTAR 2</a></li>
<li><a href="#">DAFTAR 3</a></li>
<li><a href="#">DAFTAR 4</a></li>
<li><a href="#">DAFTAR 5</a></li>
<li><a href="#">DAFTAR 6</a></li>
<li><a href="#">DAFTAR 7</a></li>
<li><a href="#">DAFTAR 8</a></li>
<li><a href="#">DAFTAR 9</a></li>
<li><a href="#">DAFTAR 10</a></li>
<li><a href="#">DAFTAR 11</a></li>
<li><a href="#">DAFTAR 12</a></li>
<li><a href="#">DAFTAR 13</a></li>
<li><a href="#">DAFTAR 14</a></li>
<li><a href="#">DAFTAR 15</a></li>
<li><a href="#">DAFTAR 16</a></li>
<li><a href="#">DAFTAR 17</a></li>
<li><a href="#">DAFTAR 18</a></li>
<li><a href="#">DAFTAR 19</a></li>
<li><a href="#">DAFTAR 20</a></li>
</ul>
</li>
<li class="fly"><a href="#">TOMBOL BUTTON &gt;</a>
<ul>
<li><a href="#">ANEKA BUTTON 1</a></li>
<li><a href="#">ANEKA BUTTON 2</a></li>
<li><a href="#">BUTTON UP</a></li>
<li><a href="#">BUTTON 3</a></li>
<li><a href="#">BUTTON 4</a></li>
<li><a href="#">BUTTON 5</a></li>
<li><a href="#">BUTTON 6</a></li>
<li><a href="#">BUTTON 7</a></li>
<li><a href="#">BUTTON 8</a></li>
<li><a href="#">BUTTON 9</a></li>
<li><a href="#">BUTTON 10</a></li>
<li><a href="#">BUTTON 11</a></li>
<li><a href="#">BUTTON 12</a></li>
<li><a href="#">BUTTON 13</a></li>
<li><a href="#">BUTTON 14</a></li>
<li><a href="#">BUTTON 15</a></li>
<li><a href="#">BUTTON 66</a></li>
<li><a href="#">BUTTON 17</a></li>
<li><a href="#">BUTTON 18</a></li>
<li><a href="#">BUTTON 19</a></li>
<li><a href="#">BUTTON 20</a></li>
</ul>
</li>
<li class="fly"><a href="#">MENU DROPDOWN &gt;</a><ul>
<li><a href="#">dropdown 1</a></li>
<li><a href="#">dropdown 2</a></li>
<li><a href="#">dropdown 3</a></li>
<li><a href="#">dropdown 4</a></li>
<li><a href="#">dropdown 5</a></li>
<li><a href="#">dropdown 6</a></li>
<li><a href="#">dropdown 7</a></li>
<li><a href="#">dropdown 8</a></li>
<li><a href="#">dropdown 9</a></li>
<li><a href="#">dropdown 10</a></li>
<li><a href="#">dropdown 11</a></li>
<li><a href="#">dropdown 12</a></li>
<li><a href="#">dropdown 13</a></li>
<li><a href="#">dropdown 14</a></li>
<li><a href="#">dropdown 15</a></li>
<li><a href="#">dropdown 16</a></li>
<li><a href="#">dropdown 17</a></li>
<li><a href="#">dropdown 18</a></li>
<li><a href="#">dropdown 19</a></li>
<li><a href="#">dropdown 20</a></li>
<li><a href="#">dropdown 21</a></li>
</ul>
</li>
<li class="fly"><a href="#">VERTIKAL MENU &gt;</a>
<ul>
<li><a href="#">VERTIKAL RIGHT</a></li>
<li><a href="#">table menu</a></li>
<li><a href="#">Chiromantis</a></li>
<li><a href="#">Cryptothylax</a></li>
<li><a href="#">Mantidactylus</a></li>
<li><a href="#">Rhacophorus</a></li>
<li><a href="#">Boophis</a></li>
<li><a href="#">Callixalus</a></li>
<li><a href="#">Chiromantis</a></li>
<li><a href="#">Cryptothylax</a></li>
<li><a href="#">Mantidactylus</a></li>
<li><a href="#">Rhacophorus</a></li>
<li><a href="#">Boophis</a></li>
<li><a href="#">Callixalus</a></li>
<li><a href="#">Chiromantis</a></li>
<li><a href="#">Cryptothylax</a></li>
<li><a href="#">Mantidactylus</a></li>
<li><a href="#">Rhacophorus</a></li>
</ul>
</li>
<li class="fly"><a href="#">M E N U &gt;</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
<li><a href="#">Link 11</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
<li><a href="#">Link 11</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub">WEB References
<ul>
<li><a href="#">Wikipedia</a></li>
<li><a href="#">Encyclopedia</a></li>
<li><a href="#">YOUTUBE</a></li>
<li><a href="#">FACEBOOK</a></li>
<li><a href="#">Wikipedia</a></li>
<li><a href="#">Encyclopedia</a></li>
<li><a href="#">Wikipedia</a></li>
<li><a href="#">Encyclopedia</a></li>
<li><a href="#">Wikipedia</a></li>
<li><a href="#">Encyclopedia</a></li>
<li><a href="#">Wikipedia</a></li>
<li><a href="#">Encyclopedia</a></li>
<li><a href="#">Wikipedia</a></li>
<li><a href="#">Encyclopedia</a></li>
<li><a href="#">Wikipedia</a></li>
<li><a href="#">Encyclopedia</a></li>
<li><a href="#">Wikipedia</a></li>
<li><a href="#">Encyclopedia</a></li>
</ul>
</li>
<li class="sub">Links
<ul>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
</ul>
</li>
<li class="sub">BLOG
<ul>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
</ul>
</li>
<li class="sub">KONTAKS
<ul>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
<li><a href="#">Old World treefrogs</a></li>
<li><a href="#">Amphibian Species</a></li>
<li><a href="#">Complete treefrogs </a></li>
</ul>
</li>
</ul>
</div>
</center>



UNTUK TANDA # BISA DIISI LINK ANDA SENDIRI