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