CSS动画效果导航元素：悬停

Question

我有一个标准的嵌套的UL导航结构和一些CSS动画上:hover子资产净值...

看到这个小提琴：http://jsfiddle.net/5kwsV/

一切工作按预期除最深的UL上的动画外。第一个subnav动画高度，第二个只应该动画宽度。

这里是处理我遇到的最深的UL动画的代码。现在

nav ul li > ul > li > ul { 
    position: absolute; 
    display: block; 
    visibility: hidden; 
    width: 0px; 
    height: auto; 
    top: 0; 
    left: 100px; 
    padding: 0; 
    margin: 0; 
    -webkit-transition: all 0.6s ease; 
     -moz-transition: all 0.6s ease; 
     -ms-transition: all 0.6s ease; 
     -o-transition: all 0.6s ease; 
     transition: all 0.6s ease; 
} 

nav ul li > ul > li:hover > ul { 
    position: absolute; 
    display: block; 
    visibility: visible; 
    width: 100px; 
    height: auto; 
    top: 0; 
    left: 100px; 
    padding: 0; 
    margin: 0; 
    -webkit-transition: all 0.6s ease; 
     -moz-transition: all 0.6s ease; 
     -ms-transition: all 0.6s ease; 
     -o-transition: all 0.6s ease; 
     transition: all 0.6s ease; 
} 

，与上面的代码的问题是，将鼠标悬停在“迈克尔”导航标签时，宽度和高度动画。它只需要动画宽度。看起来解决方案相当明显，将“全部”改为“宽度”。

硅我改变了...

-webkit-transition: all 0.6s ease; 
     -moz-transition: all 0.6s ease; 
     -ms-transition: all 0.6s ease; 
     -o-transition: all 0.6s ease; 
     transition: all 0.6s ease; 

要这个......

-webkit-transition: width 0.6s ease; 
     -moz-transition: width 0.6s ease; 
     -ms-transition: width 0.6s ease; 
     -o-transition: width 0.6s ease; 
     transition: width 0.6s ease; 

现在，徘徊的时候，动画的宽度0至100像素的动画，因为它应该。新问题是，当我移动到不同的导航标签时，它应该从100px变回到0px，但是它只是在那里闪烁。

我错过了什么？不能为我的生活看到它，我敢肯定它的东西显然是愚蠢的！

Answer 1

您也正在转换背景属性。这并不明显，因为它是在祖先中声明的，并且只是被继承的。当您悬停时，背景会发生变化，并且您会看到宽度的过渡。当您将鼠标悬停在外时，背景会发生变化，并且您看不到宽度转换。

你应该这样做：

transition-property: background, width; 
transition-duration: 0.6s; 
transition-timing-function: ease; 

与所有的供应商前缀，当然。

您的代码很难调试，因为您重复了很多不需要的属性。当这些属性与基本状态相同时，请不要将属性悬停在悬停状态中，这样做毫无用处，并且更难以发现真正的变化。 （只是一个建议，希望你不要介意:-)

updated demo