CSSのみのメニューを設定するサブメニューの表示が消える

Question

CSSを使用して一定時間後にサブメニュー項目を表示させようとしています。残念ながら、複数のサブメニューがあり、次のサブメニューにカーソルを合わせると、もう1つはまだ消えていません。次のサブメニューが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

を。

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例試してみてください。誰もが唯一の解決策明らかにこれを達成する唯一の方法ではJavaScript/jQueryの経由で作業CSSを提案していないと見て

<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; 
}