-->
 
CSS Menu Drop Down Melayang

BERANDAARCHIVEQUR'ANYASINTAHLILAMALAN

     
Menu drop down ini sangat praktis dan membuat blog semakin rapi. Untuk demonya kalau nggak error seperti menu diatas.Fungsi Menu drop down salah satunya adalah bisa menghemat Latar blog anda .Contohnya seperti gambar diatas dan buktinya seperti pada blog ini. Bagaimana Mantap bukan..?

Langsung aja dolor kita ikuti Langkah - langkahnya ;
  1. Login ke akun Blog anda
  2. Klik rancangan Elemen Laman
  3. Klik Add Gadget HTML/Javascript
  4. Perhatikan kode dibawah ini , copy paste kedalam GADGET tadi


KODE CSS dan HTML

<style type="text/css">

/*MENU*/

#cueros ul li a {position: relative;float: bottom;display: block;width: auto;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#cueros li .current{color: transparant;}#cueros li a:hover, #cueros li a:active {background:#585858;background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); background: -o-linear-gradient(top,#4B0082, #FF0000); display: inline-block;zoom: 1; *display: inline;border: outset 2px #B45F04;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-o-transform:rotate(5deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#cueros {width: auto;float: left;}#cueros ul {float: left;}#cueros li a, #cueros li a:link, #cueros li a:visited {color: #B45F04;display: block;text-transform: capitalize;margin: 0;padding: 6px 12px 8px;font: bold 12px Segoe Script;}#cueros li a:hover, #cueros li a:active {color: #FFFFFF;margin: 0;font-size:13px;padding: 9px 15px 8px;text-decoration: none;font-family:Verdana;}#cueros li li a, #cueros li li a:link, #cueros li li a:visited {background:#585858;background: -webkit-gradient(linear, left top, left bottom, from(#CD1007), to(#000000)); background: -moz-linear-gradient(top,#CD1007, #000000);background: -o-linear-gradient(top,#CD1007, #000000); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset; font: bold 18px Bradley Hand ITC;color: #B45F04;}#cueros li li a:hover, #cueros li li a:active {background:#585858;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#D9FE00)); background: -moz-linear-gradient(top,#FF0000, #D9FE00);background: -o-linear-gradient(top,#FF0000, #D9FE00); color: #FFFFFF;font-size:18px;font-family:Verdana;text-align: center;padding: 7px 10px;}#cueros li {float: left;padding: 0;}#cueros li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;}#cueros li ul a {width: 140px;}#cueros li ul ul {margin: -32px 0 0 171px;}#cueros li:hover ul ul, #cueros li:hover ul ul ul, #cuerosa li.sfhover ul ul, #cueros li.sfhover ul ul ul {left: -999em;}#cueros  li:hover ul, #cueros  li li:hover ul, #cueros  li li li:hover ul, #cueros  li.sfhover ul, #cueros  li li.sfhover ul, #cueros  li li li.sfhover ul {left: auto;}#cueros  li:hover, #cueros  li.sfhover {position: static;}#footer-column-divide {clear:both;}#cueros{background:#000;height:30px;border:2px outset #FF0000;padding:2px 0;z-index:999;top:5px;left:5px;right:5px;position:fixed;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
</style>
<ul id="cueros">
<li><a href="http://cuerosbhelatos.blogspot.com/">Home</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/" target="_blank">Menu</a>
<ul class="children">
<li><a href="http://cuerosbhelatos.blogspot.com/p/aplikasi-komputer.html" target="_blank">software PC</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Action" target="_blank">action game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Sexx" target="_blank">adult game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/HD%20Android%20Game" target="_blank">android game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Car%20Racing" target="_blank">car game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Motorace" target="_blank">motor game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20House" target="_blank">house game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Sport" target="_blank">sport game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Rip" target="_blank">rip game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/HoLLy%20Movie%27s" target="_blank">holly movie</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/MoVies%20X" target="_blank">adult movie</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/musik.html" target="_blank">musik</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/wallpaper.html" target="_blank">wallpaper</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/chat-hot.html" target="_blank">chat hot</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Tips%20and%20Trik" target="_blank">tips N triks</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/" target="_blank">Game Pc</a>
<ul class="children">
<li><a href="http://cuerosbhelatos.blogspot.com/p/game-rip.html" target="_blank">indeks game pc</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Action" target="_blank">action game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Car%20Racing" target="_blank">car game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Motorace" target="_blank">motor game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Sport" target="_blank">sport game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Sexx" target="_blank">adult game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Rip" target="_blank">game rip</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20House" target="_blank">Game House</a>
<ul class="children">
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20House" target="_blank">indeks game house</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/2011/07/game-house-1.html" target="_blank">game house 1</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/2011/07/game-house-2.html" target="_blank">game house 2</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/2011/07/game-house-3.html" target="_blank">game house 3</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/2011/07/game-house-4.html" target="_blank">game house 4</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/2011/07/game-house-5.html" target="_blank">game house 5</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/aplikasi-komputer.html" target="_blank">Software</a>
<ul class="children">
<li><a href="http://cuerosbhelatos.blogspot.com/p/aplikasi-komputer.html" target="_blank">indeks software</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Aplikasi" target="_blank">software 1</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Software%20PC" target="_blank">software 2</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/tips-blogger.html">Tip n Trik</a>
<ul class="children" target="_blank">
<li><a href="http://cuerosbhelatos.blogspot.com/p/tips-blogger.html" target="_blank">indeks tips blogger</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Tips%20and%20Trik" target="_blank">tips blogger</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Template%20Blog" target="_blank">template blog</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/tips-komputer.html" target="_blank">tips komputer</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Software%20PC" target="_blank">Other</a>
<ul class="children">
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/HD%20Android%20Game" target="_blank">android game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/chat-hot.html" target="_blank">chat hot</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/musik.html" target="_blank">Musik</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/wallpaper.html" target="_blank">Wallpaper</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/virtual-girl.html" target="_blank">Movie</a>
<ul class="children">
<li><a href="http://cuerosbhelatos.blogspot.com/p/virtual-girl.html" target="_blank">indeks movie</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/MoVies%20X" target="_blank">adult movie</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/HoLLy%20Movie%27s" target="_blank">holly movie</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/2011/10/link-exchange.html" target="_blank">Blog Exchange</a><ul class="children">
<li><a href="http://cuerosbhelatos.blogspot.com/2011/10/link-exchange.html" target="_blank">Banner Exchange</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/2011/10/link-sahabat.html" target="_blank">Link Exchange</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/buku-tamu-sahabat.html"title="tinggalkan pesan Sobat disini" target="_blank"><blink>Buku Tamu</blink></a></li>
<li><a href="http://www.facebook.com/binkbenk.djoel"title="connect with me" target="_blank">Facebook</a></li>
<li><a href="http://www.blogger.com/" title="login" target="_blank">Login</a></li></ul>
  1. Edit kode alamat URL menu blog sobat dan ganti nama menu-menunya.
  2. Untuk mendapatkan efek warna yang berbeda , pada kode CSS diatas silahkan ganti kode warnannya
  3. Lalu Simpan dan Taruh Gadget dibagian bawah Blog/footer
Selamat Mencoba.....!!!!!

Posted On : 10 Agustus 2011 Time : 13.37
SHARE TO :
| | Powered By : C.(BH-elatos) | Copyright By : cuerosbhelatos | |