为子菜单设置仅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; 
}