爲什麼最大高度沒有隱藏我的內容

Question

我試圖創建一個下拉導航欄與一些微妙的過渡。我無法使用height:0 > height:auto隱藏內容，因爲它僅適用於轉場。我嘗試使用max-height:0 > max-height:5000px，但似乎內容實際上仍然存在於opacity中。這產生了一個問題，因爲當你將鼠標懸停在「隱形」內容上時，即使它不是真的應該顯示出來。

這裏有一個演示：

http://codepen.io/ajrdesign/pen/cabGx

HTML：

<ul class="nav"> 
    <li><a href="">Home</a></li> 
    <li class="has-dropdown"> 
    <a href="">Products 
    </a> 
    <div class="dropdown-content"> 
     <ul class="nav"> 
     <li><a href="#">Some</a></li> 
     <li><a href="#">More</a></li> 
     <li><a href="#">Links</a></li> 
     </ul> 
    </div> 
    </li> 
    <li><a href="">Solutions</a></li> 
    <li><a href="">More</a></li> 
</ul> 

CSS

ul { 
    list-style:none; 
} 
li { 
    display:inline-block; 
} 
.has-dropdown{ 
    position: relative; 
} 
.dropdown-content{ 
    opacity:0; 
    max-height: 0; 
    -webkit-transition: opacity 200ms ease-in-out 350ms; 
    -moz-transition: opacity 200ms ease-in-out 350ms; 
    -ms-transition: opacity 200ms ease-in-out 350ms; 
    -o-transition: opacity 200ms ease-in-out 350ms; 
    transition: opacity 200ms ease-in-out 350ms; 
    position: absolute; 
    z-index: 1000; 
} 

.has-dropdown:hover .dropdown-content{ 
    display:block; 
    opacity: 1; 
    max-height: 5000px; 
} 

什麼是掛機？爲什麼max-height:0實際上並不像它應該那樣工作？

Answer 1

下面是你可以如何解決它的想法：這個想法是切換元素的可見性並使其淡入。當反轉這個時，在鼠標離開時，子菜單淡出，並且可見性被設置爲隱藏，但是這個時間的延遲，所以它發生在一個元素之後已經完成淡出：

CSS

.dropdown-content { 
    visibility: hidden; 
    opacity:0; 
    position: absolute;   
    transition: opacity 0.2s 0.35s ease-in-out, visibility 0s 0.55s linear; 
} 

.has-dropdown:hover .dropdown-content{ 
    visibility: visible; 
    opacity: 1; 
    transition: opacity 0.2s 0.35s ease-in-out, visibility 0s 0s linear; 
} 

演示

Try before buy