Question

I think I am been misunderstood here so I will rephrase my question.

THE PROBLEM: when I “hover” over the menu the black span with class “problem” follows my mouse but it messes up its position because I don’t know to calculate it correctly:(
Try to hover over my menu to see the problem.
Been trying for two days to figure this out, but no success…

FIDDLE HERE

Here’s the LINK of my site.

Any help or suggestion?

$(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

I’d start by updating the .menu styles thusly:

float: none;
width: 715px;
height: 30px;
display: block;
position: relative;
margin: 9px auto;

You’ll then need to move the active element behind it, which you can possibly do by applying a negative top-margin