CSS Transition - 高度容易

Question

我有這個純粹由CSS驅動的導航菜單。它擴展鼠標懸停和崩潰鼠標。我想要的功能是保持菜單打開，直到另一個按鈕懸停。

簡單地使用CSS還是需要使用jQuery或JavaScript？

我修改了擴展的垂直導航菜單，並且在CSS中的高度值發生更改時，緩動效果不起作用。每個導航元素的內容不同，並且具有固定值，則無法獲得所需的結果。

如果只能在CSS下完成，這裏是JSFiddle。

Answer 1

我的解決方案是設置li元素上的高度轉換，而不是ul，這樣您就不必推斷總高度。

這裏是一個可行的解決方案：http://jsfiddle.net/siorge/w55rZ/2/

編輯顯示的代碼：

/*ul Styles*/ 
.menu-item ul li { 
    background: #fff; 
    font-size: 13px; 
    line-height: 30px; 
    height: 0px; 
    list-style-type: none; 
    overflow:hidden; 
    padding: 0px; 

/*Animation*/ 
-webkit-transition: height 1s ease; 
    -moz-transition: height 1s ease; 
     -o-transition: height 1s ease; 
    -ms-transition: height 1s ease; 
     transition: height 1s ease; 
} 


.menu-item:hover li { 
    height: 32px; 
    border-bottom: 1px solid #eee; 
} 

Answer 2

而不是設置的 「高度：0;」設置「max-height：0;」然後：懸停設置「max-height：500px;」

http://jsfiddle.net/w55rZ/7/

.menu-item ul {  
    /* Remove delay by setting transition delay to -0.25s */ 
    -webkit-transition: all 1s -0.25s ease-out; 
    -moz-transition: all 1s -0.25s ease-out; 
     -o-transition: all 1s -0.25s ease-out; 
     -ms-transition: all 1s -0.25s ease-out; 
      transition: all 1s -0.25s ease-out; 
    max-height: 0; 
} 

.menu-item:hover ul { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
     -o-transition: all 1s ease; 
     -ms-transition: all 1s ease; 
      transition: all 1s ease ; 
    max-height: 500px; 
}