Set CSS only menu disappear delay for submenus - html

Question

I'm trying to have the sub menu items disappear after a certain amount of time using CSS only. Sadly if I have more than one sub menu and hover over the next sub menu the other one has not yet disappeared. Any way to make the previous sub menu disappear when the next sub menu is show with CSS only?
It wouldn't be hard for me to write a JQuery script to achieve this but would nice if I could do it using css. Would there be any JS/JQuery plugins to recommend if this is not possible with CSS?
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>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>
Dropdown
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
</ul>
</nav>

Answer 1

Try to remove transition: 0.2s 1s;

Answer 2

Just change the tarnsition time as shown below code.
nav > ul > li ul {
visibility: hidden;
position: absolute;
top: 105%;
left: 0;
transition: 0.2s;
}

Answer 3

Try this example of code:
<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;
}

Answer 4

Seeing as no one proposed a working CSS only solution apparently the only way to achieve this is through javascript/JQuery.
https://jsfiddle.net/jkanckr3/
<nav>
<ul>
<li>
Dropdown
<ul>
<li>One</li>
<li>Two</li>
<li>Three</a></li>
</ul>
</li>
<li>
Dropdown
<ul>
<li>One</li>
<li>Two</li>
<li>Three</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;
}