How to recalculate correct position
<p>I think I am been misunderstood here so I will rephrase my question.
<br/>THE PROBLEM: when I <b>"hover"</b> over the menu the black span with class <b>"problem"</b> follows my mouse but it messes up its position because I don't know to calculate it correctly:( <br/><b><i>Try to hover over my menu to see the problem.</i></b>
Been trying for two days to figure this out, but no success...</p>

<p><a href="http://jsfiddle.net/w3DrE/" rel="nofollow">FIDDLE HERE</a></p>

<p>Here's the <a href="http://www.snagomuma.com/newlife/" rel="nofollow">LINK</a> of my site.</p>

<p>Any help or suggestion?  </p>

<pre><code>$(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);     
    });
});
</code></pre>
