Question

Possible Duplicate:
How to recalculate correct position

I have been trying to achive this effect: When I hover over menu , span with class “problem” follows my mouse and it’s expandig dynamicly (has the same width as hovered li tag). The width of my span is working OK but its position is messed up because I don’t know
how to make proper calculations.
Try to hover over my menu to see the problem.

FIDDLE HERE
Does anybody knows how to solve this problem or point me in the right direction?

  $(document).ready(function(){
    $('.menu ul li').hover(function(){
        var index=$(this).index();
        var width=$(this).outerWidth();        
        $('.problem').stop().animate({'marginLeft':135*index+195,'width':width},1000);     
    });
});

Answer 1

This would work better I think:

http://jsfiddle.net/w3DrE/16/