Lava_menu
HTML
<ul id="lava_menu">
<img src="http://cdn1.iconfinder.com/data/icons/devine_icons/Black/PNG/System%20and%20Internet/Mouse%20and%20input.png" width="25px" id="google" height="25px"/>
<li class="current" style="width: 100px;"><a href="index.html">Intro</a></li>
<li style="width: 100px;"><a href="resume.html">Resume</a></li>
<li style="width: 100px;"><a href="worksamples.html">Work samples</a></li>
<li style="width: 10px;"><a href="contact.php">Contact</a></li>
</ul>
CSS
#lava_menu li {
float: left;
list-style: none;
padding-right:10px
}
JavaScript
$(document).ready(function(){
var pos = $("li.current").position();
// alert(pos.left);
$("#google").css({"position":"absolute","left":pos.left,"right":pos.right, "top":pos.top ,"bottom":pos.bottom,"border-color":":5px solid red"});
});
$('li').hover(
function () {
var pos = $(this).position();
$("#google").animate({
left: pos.left,
},"slow");
},
function () {
var pos = $("li.current").position();
$("#google").animate({
left: pos.left,
},"fast");
}
);