Lavalam drop down menu

1. Login ke blogger dashboard
2. Template >> Edit HTML 
3.Cari kode seperti ini ]]> </ b: skin> dan taruh kode CSS berikut di bawah ini dan taruh tepat di atas kode ini
 ]]> </ b: skin>

4.  Kode CSS 

/*lavalamp fancy menu start*/

.lavalamp {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
background : -webkit-gradient(linear, left top, left bottom, 

from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-gradient(linear, left top, left bottom, 

from(rgb(240,240,240)), to(rgb(204,204,204)));
height: 18px;
font-family: calibri;
}

.magenta {
background : rgb(190,64,120);
background : -webkit-gradient(linear, left top, left bottom, 

from(rgb(190,64,120)), to(rgb(177,24,91)));
background : -moz-gradient(linear, left top, left bottom, 

from(rgb(190,64,120)), to(rgb(177,24,91)));
border: 1px solid #841144;

}

.cyan {
background : rgb(64,181,197);
background : -webkit-gradient(linear, left top, left bottom, 

from(rgb(64,181,197)), to(rgb(7,165,187)));
background : -moz-gradient(linear, left top, left bottom, 

from(rgb(64,181,197)), to(rgb(7,165,187)));
border: 1px solid #2f8893;

}

.yellow {
background : rgb(255,199,79);
background : -webkit-gradient(linear, left top, left bottom, 

from(rgb(255,199,79)), to(rgb(255,188,43)));
background : -moz-gradient(linear, left top, left bottom, 

from(rgb(255,199,79)), to(rgb(255,188,43)));
border: 1px solid #c08c1f;

}

.orange {
background : rgb(255,133,64);
background : -webkit-gradient(linear, left top, left bottom, 

from(rgb(255,133,64)), to(rgb(255,107,24)));
background : -moz-gradient(linear, left top, left bottom, 

from(rgb(255,133,64)), to(rgb(255,107,24)));
border: 1px solid #c04f11;

}

.dark {
background : rgb(89,89,89);
background : -webkit-gradient(linear, left top, left bottom, 

from(rgb(89,89,89)), to(rgb(54,54,54)));
background : -moz-gradient(linear, left top, left bottom, 

from(rgb(89,89,89)), to(rgb(54,54,54)));
border: 1px solid #272727;

}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}

.lavalamp a {
text-decoration: none;
color: #262626;
line-height: 20px;
}

.lavalamp ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}

.lavalamp ul li {
list-style: none;
float:left;

text-align: center;
}

.lavalamp ul li a {
padding: 0 20px;
text-align: center;
}

.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 70px;
height: 30px;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}

/*lavalamp fancy menu End*/

5. Masukkan kode  di bawah ini dan taruh di atas kode ini </ head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script src='http://baliwebdesign.googlecode.com/files/lavalamp2.js' type='text/javascript'/>

6. Anda dapat menempatkan kode berikut dalam template>>edit html dan taruh sebelum 
content-wrapper atau dengan menggunakan HTML / javascript gadget.

<div class=“lavalamp”>
 <ul>
  <li class=“active”><a href=”http://tandatangangusde.blogspot.com/”>Home</a></li>
  <li><a href=”#”>About</a></li>
  <li><a href=”http://tandatangangusde.blogspot.com/”>Blog</a></li>
  <li><a href=”#”>Services</a></li>
  <li><a href=”#”>Portfolio</a></li>
  <li><a href=”#”>Contacts</a></li>
  <li><a href=”#”>Back to Article</a></li>
  <li><<a href=”#”>How it Works?</a></li>
 </ul>
 <div class=“floatr”></div>
</div>

7. - Warna Style:  
Ganti kode <div class="lavalamp"> dengan pilihan gaya kode di bawah ini:

<div class=“lavalamp cyan”>
<div class=“lavalamp dark”>

<div class=“lavalamp magenta”>
<div class=“lavalamp orange”>
<div class=“lavalamp yellow”>

Original source:

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
http://www.devthought.com/2007/01/29/cssjavascript-true-power-fancy-menu/
http://blog.insicdesigns.com/2010/02/creating-a-fancy-menu-using-css3-and-jquery/