css - 导航中的动画宽度和显示问题

Question

问题很简单......我有一个导航结构，我在适当的地方为子导航设置了动画高度和宽度。

在这个版本中：http: //jsfiddle.net/PmFxZ/3/

对于我的第 2 层和更高级别的子导航，我有display: none;和 (on :hover) 。display: block;

这允许结构正常工作，但不允许宽度动画。

在这个版本中：http: //jsfiddle.net/PmFxZ/4/

显示：无；设置为显示：块；。这允许宽度动画运行。但会导致另一个问题。也就是说，如果您将鼠标悬停在 About > Our Team > Kenny - 它也会悬停在“Something”的孩子上

有什么办法可以使用 display: none/block; 允许悬停状态正确运行，还允许播放宽度动画？

Answer 1

找到了一个很好的解决方案。UL 的绝对定位相对于他们的 LI 父母。只需将它们的left: 150px;属性更改为-2000pxthen on hover putleft: 150px;和 walaa。问题解决了。

http://jsfiddle.net/PmFxZ/5/