如何重新计算正确的位置

我想我在这里被误解了，所以我会重新解释我的问题。
问题：当我“hover”在菜单上时，带有“问题”类的黑色跨度跟随我的鼠标，但它弄乱了它的位置因为我不知道要正确计算它:(
尝试将鼠标hover在我的菜单上以查看问题。 一直试着用两天时间搞清楚这一点，但没有成功……

骗子在这里

这是我网站的链接 。

任何帮助或建议？

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

将菜单div的CSS设置为：

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

凭借固定的宽度和自动余量，CSS将使您的div居中。