通过识别活动链接的位置为菜单操作设置动画

Question

Soo，我有这个脚本：my jsfiddle

正如您在悬停菜单项时所看到的那样动画，但当li中断时，活动div会忽略它并决定飞走。

我建议访问我的链接以更好地理解我的问题。关于如何解决这个问题的任何想法？

提前谢谢！
亲切的问候，
乔纳森

Answer 1

动画找到悬停位置的索引（例如，如果它是第5 li则索引= 5），并简单地计算绝对定位元素的左边距，即宽度的许多倍悬停的物品。动画不会考虑浮动，包括垂直定位。

而不是这样，将绝对定位元素的左侧和顶部属性设置为与悬停项目相同。

我在这里完成了这个： http://jsfiddle.net/q2AVN/7/

Answer 2

一个可能的想法是让菜单项不破。否则很难重写动画。

为了做到这一点，您可以使用应用于父元素的CSS样式white-space: nowrap（即ul或div）并设置样式display: inline-block（而不是{{ 1}}）到float: left元素。