jquery - 如何重新计算正确的位置

Question

我想我在这里被误解了，所以我会改写我的问题。
问题：当我“悬停”在菜单上时，带有“问题”类的黑色跨度跟随我的鼠标，但它弄乱了它的位置，因为我不知道正确计算它:(
尝试将鼠标悬停在我的菜单上以查看问题. 已经尝试了两天来解决这个问题，但没有成功......

在这里提琴

这是我网站的链接。

有什么帮助或建议吗？

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

将菜单 div 的 CSS 设置为：

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

使用固定宽度和自动边距，CSS 将使您的 div 居中。

Answer 2

我将首先更新.menu样式：

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

然后，您需要将活动元素移到它后面，您可以通过应用负数来完成top-margin