如何使下拉菜單淡入和淡出過渡？

Question

我想讓下拉菜單淡入/淡出。我試圖添加不透明和懸停，但我無法弄清楚。

nav ul li:hover > .midbox { 
    opacity:1; 
    transition: all 0.5s ease; 
} 

我比.midbox設置opacity:0施加相同的過渡。 下面是一個例子的小提琴。

https://jsfiddle.net/skf5v0Lw/

我應該用其他的元素懸停狀態影響到下拉的狀態？

Answer 1

CSS轉換不上display物業工作。改爲使用visibility。它也應該設置在下拉式UL上而不是內部元素上。

/* Hide Dropdowns by Default 
* and giving it a position of absolute */ 
nav ul ul { 
    /* display: none; */ 
    position: absolute; 
    width: 800px; 
    top: 60px; 
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.5s ease; 
} 

/* Display Dropdowns on Hover */ 
nav ul li:hover > ul { 
    /* display:block; */ 
    opacity: 1; 
    visibility: visible; 
} 

https://jsfiddle.net/skf5v0Lw/5/

Answer 2

不知道這是否有幫助，但你可以檢查出dropotron，它允許一系列設置，如淡入淡出，懸停延遲等等。

https://github.com/n33/jquery.dropotron