如何动画跨度到正确的位置？

Question

  

可能重复：
  How to recalculate correct position

我一直试图达到这样的效果：当我将鼠标悬停在菜单上时，跨越类“问题”跟随我的鼠标并且它的动态展开（与hovered li标签具有相同的宽度）。我的跨度的宽度工作正常，但它的位置搞砸了，因为我不知道 如何进行正确的计算。
尝试将鼠标悬停在我的菜单上以查看问题。
FIDDLE HERE
有人知道如何解决这个问题或者指出我正确的方向吗？

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

Urm，你没有正确地得到你的浮动和底层文本。您的li似乎向左浮动，但超出了其父级的宽度。因此，最后一个菜单项（li）会自动关闭。您必须减少字体大小或执行类似的操作。

ul li{
    float:left;
    width : 120px;
    overflow : hidden;
    white-space : nowrap;
    margin-left:10px;
}

见this。

Answer 2

我认为这会更好：

http://jsfiddle.net/w3DrE/16/