爲子菜單設置僅CSS菜單消失延遲

Question

我試圖讓子菜單項在一段時間後僅使用CSS消失。可悲的是，如果我有多個子菜單並將鼠標懸停在下一個子菜單上，另一個菜單還沒有消失。當下一個子菜單僅用CSS顯示時，如何使上一個子菜單消失？

對我來說，編寫一個JQuery腳本來實現這一點並不難，但如果我可以使用css來完成，那將會很好。如果這不適用於CSS，會不會推薦任何JS/JQuery插件？

http://codepen.io/anon/pen/aBPBbj

nav > ul > li { 
 
    display: inline-block 
 
} 
 
nav > ul > li ul { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    top: 105%; 
 
    left: 0; 
 
    transition: 0.2s 1s; 
 
} 
 
nav > ul > li:hover ul { 
 
    visibility: visible; 
 
    transition-delay: 0s; 
 
} 
 
nav ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
nav li { 
 
    width: 100px; 
 
    background: #eee; 
 
    margin: 2px; 
 
    position: relative; 
 
    padding: 10px; 
 
} 
 
nav a { 
 
    display: block; 
 
} 
 
    
 
body { 
 
    padding: 10px; 
 
}

<nav> 
 
    <ul> 
 
    <li> 
 
     Dropdown 
 
     <ul> 
 
     <li><a href="#">One</a></li> 
 
     <li><a href="#">Two</a></li> 
 
     <li><a href="#">Three</a></li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     Dropdown 
 
     <ul> 
 
     <li><a href="#">One</a></li> 
 
     <li><a href="#">Two</a></li> 
 
     <li><a href="#">Three</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

看到，因爲沒有人提出了一個工作CSS唯一的解決辦法顯然是實現這一目標是通過JavaScript/JQuery的唯一途徑。

https://jsfiddle.net/jkanckr3/

<nav> 
    <ul> 
    <li> 
     Dropdown 
     <ul> 
     <li><a href="#">One</a></li> 
     <li><a href="#">Two</a></li> 
     <li><a href="#">Three</a></a></li> 
     </ul> 
    </li> 
    <li> 
     Dropdown 
     <ul> 
     <li><a href="#">One</a></li> 
     <li><a href="#">Two</a></li> 
     <li><a href="#">Three</a></a></li> 
     </ul> 
    </li> 
    </ul> 
</nav> 

var timeout; 

$('nav > ul > li').on({ 
    mouseenter: function() { 
     clearTimeout(timeout); 
     $('nav > ul > li > ul').hide(); 
     $('ul', this).show(); 
    }, 
    mouseleave: function() { 
     var self = this; 
     timeout = setTimeout(function() { 
      $('ul', self).hide(); 
     }, 500); 
    } 
}); 

nav > ul > li { 
    display: inline-block 
} 
nav > ul > li ul { 
    display: none; 
    position: absolute; 
    top: 105%; 
    left: 0; 
} 
nav > ul > li:hover ul { 
    //visibility: visible; 
} 
nav ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
nav li { 
    width: 100px; 
    background: #eee; 
    margin: 2px; 
    position: relative; 
    padding: 10px; 
} 
nav a { 
    display: block; 

} 

body { 
    padding: 10px; 
} 

Answer 2

嘗試刪除過渡：0.2秒1秒;

Answer 3

只需更改如下代碼所示的淡化時間。

nav > ul > li ul { 
    visibility: hidden; 
    position: absolute; 
    top: 105%; 
    left: 0; 
    transition: 0.2s; 
} 

Answer 4

嘗試的代碼this例如：

<ul id="mainNav"> 
<li>item 1 
    <ul> 
     <li>sub item 1</li> 
     <li>sub item 2</li> 
     <li>sub item 3</li> 
    </ul>   
</li> 
<li>item 2 
    <ul> 
     <li>sub item 1</li> 
     <li>sub item 2</li> 
     <li>sub item 3</li> 
     <li>sub item 4</li> 
    </ul>  
</li> 
<li>item 3 
    <ul> 
     <li>sub item 1</li> 
     <li>sub item 2</li> 
    </ul>  
</li> 

ul#mainNav { 
float:left; 
width:auto; 
margin:0; padding:0; 
color:white; 
list-style-type:none; 
} 
ul#mainNav > li { 
float:left; 
display:inline; 
position:relative; 
padding:5px; 
border:1px white solid; 
background-color:black; 

} 
ul#mainNav > li:hover { 
background:white; 
color:black; 
border:1px black solid; 
} 
ul#mainNav > li:hover ul { 
visibility: visible; 
opacity: 1; 
transition-delay: 0s, 0s; 
} 
ul#mainNav li ul { 
position:absolute; 
float:left; 
width:100px; 
height:0; 
padding:10px; 
margin:0; 
visibility: hidden; 
opacity: 0; 
transition-property: opacity, visibility; 
transition-duration: 1.4s, 0s; 
transition-delay: 0s, 0s; 
} 
ul#mainNav ul li { 
background-color:white; 
border:1px black solid; 
} 
ul#mainNav ul li:hover { 
background-color:black; 
border:1px white solid; 
color:white; 

visibility: hidden; 
opacity: 0; 
transition-property: opacity, visibility; 
transition-duration: 0s, 0s; 
transition-delay: 0s, 0s; 
}