Before i start on how to get the effect, here is the final outcome . Lava Lamp effect

The most important concept for this effect is the absolute positioning and the morphing of the element.

The HTML

<div id="navigation">
    <ul>
        <li id="selected"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Details</a></li>
        <li><a href="#">Feedback</a></li>
    </ul>
    <div id="blob"></div>
</div>

The CSS

#navigation{
    position:relative;
    background:#ccc;
    color:#000;
    height:31px;
    font-family:ubuntu;
}
#navigation ul{
    list-style-type:none;
    margin:0px;
    padding:0px;
    margin:0px 3px;
}
#navigation ul li{
    float:left;
    margin:3px 0px;
    height:23px;
    text-align:center;
}
#navigation ul li a{
    position:relative;
    overflow:hidden;
    display:block;
    padding:2px 0px 0px 0px;
    margin:0px 30px;
    z-index:2;
    color:#000;
    text-decoration:none;
}
#blob{
    position:absolute;
    z-index:1;
    height:25px;
    margin:3px;
    left:225px;
    background:#aaa;
}

The Javascript

$(document).ready(function () {
        var _iPos=$('div#navigation').position();
        var _iLeft=_iPos.left;
        var _intPos=$('li#selected').position();
        var _intWidth=$('li#selected').width();
        $("#blob").css({'left':(_intPos.left)+'px','width':$('li#selected').width()+'px'});

    $("div#navigation ul li a").hover(function()
    {
        var _pos=$(this).parent().position();
        var _width=$(this).parent().width();
        $("#blob").stop().animate({left : _pos.left+"px", width: _width+"px"},400);
    },
    function(){
        var _intPos=$('li#selected').position();
        var _iLeft=_intPos.left;
        $("#blob").stop().animate({left : _iLeft+"px",'width':$('li#selected').width()+'px'},400);
        });

    });

The script and css is pretty straight-forward. That should be enough for some lava lamp Magic !!!