在Nav中设置动画宽度和显示的问题

时间:2013-05-11 00:54:42

标签: css html5 animation navigation css-transitions

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

在此版本中:http://jsfiddle.net/PmFxZ/3/

我有display: none;和(:hoverdisplay: block;用于我的第2级及更高版本的子颜色。

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

在此版本中:http://jsfiddle.net/PmFxZ/4/

显示:无;设置为display:block;。这允许宽度动画操作。但导致另一个问题。也就是说,如果你将鼠标悬停在About>上我们的团队>肯尼 - 它也徘徊在“Something”的孩子身上

有没有办法使用display:none / block;允许悬停状态正常运行,还允许宽度动画播放?

1 个答案:

答案 0 :(得分:0)

找到了一个很好的解决方案。 UL的相对于他们的LI父母绝对定位。只需将其left: 150px;属性更改为-2000px,然后将鼠标悬停在left: 150px;和walaa上。问题解决了。

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