Как пересчитать правильное положение

Question

Я думаю, что меня неправильно поняли, поэтому я перефразирую свой вопрос.
ПРОБЛЕМА: когда я «парить» над меню черного диапазона с классом «проблемы» следует мышь, но она портит свою позицию, потому что я не знаю, чтобы вычислить его правильно :(
Try парить над моим меню, чтобы увидеть проблему. не пытался в течение двух дней, чтобы понять это, но никакого успеха ...

FIDDLE HERE

Вот LINK моего сайта.

Любая помощь или предложение?

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

Я бы начать обновление .menu стилей таким образом:

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

Затем вам нужно переместить активный элемент позади него, что возможно, вы можете сделать, применяя отрицательный top-margin

Answer 2

Установите CSS в DIV меню для:

width://insert wanted width here 
margin:auto; 

С фиксированной шириной и авто краями, CSS будет центрирование DIV.