Hi Bloggers , lava lamp menu is A beautiful Horizontal tab menu with css3 for Blogger blog, This Tab menu suits every blog and you can choose your own color. if you want add this beautiful widget tour blog Follow these steps :

• go to your Dashboard > Design > Edit HTML and check “Expand Widget Templates“

Copy and paste the below Code Above ]]></b:skin>

/*LAVALAMP 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;
}
.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);
}
a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}
ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}
ul li {
    list-style: none;
    float:left;
    text-align: center;
    }
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;
}

Now add the below JavaScript just above </head>

<script src='http://yourjavascript.com/3131111161/jquery-1.4.1.min.js'/>
<script src='http://yourjavascript.com/1414311106/lavalamp.js'/>

Now go to your blogger dashboard and click Design > Add a Gadget >  HTML/JavaScript and paste the below Code  there.

<div class='lavalamp'>
<ul>
<li class='active'><a href='/'>Home</a></li>
<li><a href='YOUR-LINK-HERE'>About</a></li>
<li><a href='YOUR-LINK-HERE'>Blog</a></li>
<li><a href='YOUR-LINK-HERE'>Services</a></li>
<li><a href='YOUR-LINK-HERE'>Portfolio</a></li>
<li><a href='YOUR-LINK-HERE'>Contacts</a></li>
</ul>
<div class='floatr'/>
</div>

Change (YOUR-LINK-HERE) With Your Links