Delay for 1 second for the dropdown to disappear when the mouse is removed if it doesn't come back
Here is my HTML navigator
<nav>
<ul id="mainnav">
<li><a href="#">a thing</a></li>
<li><a href="#">some stuff</a>
<ul>
<li><a href="###">dropdown1</a></li>
<li><a href="###">dropdown2</a></li>
</ul>
</li>
</ul>
</nav>
and Javascript
<script type="text/javascript">
$('#mainnav ul').hide();
$('#mainnav li > a').hover(
function () {
//show its submenu
$('ul', this.parentNode).stop().slideDown(0) = set
}
);
$('#mainnav li').hover(null,
function () {
//hide its submenu
$('ul', this.parentNode).stop().delay(1000).slideUp(0);
});
I got JavaScript from jsfiddle and got it working. I am quite competent in HTML and CSS, but apart from the fairly obvious logic, I would say that JavaScript is foreign to me.
With CSS, it looks like this: 
I'm looking for a CSS snippet that when I take out the mouse OFF (hover (null)) in the dropdown menu and it doesn't disappear immediately, but rather lingers until after the second , but doesn't disappear if I go back to the menu before he does .
I had a really good look, but couldn't find an answer on the site that not only directly addresses this exact issue, but is also simple enough to understand.
source to share
DEMO I have to say that javascript is not a good solution in this case. css is the very best way to achieve this .. anyway
$(document).ready(function(){
$('#mainnav li ul').hide()
$('#mainnav li').on('mouseenter', function(){
$(this).css('background','yellow');
$(this).find('ul').slideDown(700);
});
$('#mainnav li').on('mouseleave', function(){
$(this).css('background','none');
$(this).find('ul').slideUp(700);
});
});
in css DEMO
#mainnav li{
background: #eee;
}
#mainnav li ul li{
background: none;
}
#mainnav li:hover{
background: yellow;
}
#mainnav li:hover ul{
height: 100px;
transition-delay: 0s;
transition-duration: 1s;
}
#mainnav li ul{
overflow: hidden;
height: 0px;
transition-delay: 10s;
transition-duration: 2s;
}
transition delay: 10 s; the submenu will disappear after 10 seconds, so wait for it
source to share
Edit: I think the above pure css solution is better.
Try this: http://jsfiddle.net/dqisv/g1f0nth5/3/
Set the default submenu display to none and then use jQuery addClass to set the display of this element to block. Add a delay, then create a queue item to remove this class.
$(document).ready(function () {
$('#mainnav li').hover(
function () {
$('ul', this).addClass('subnav-show').delay(2000).queue(function(){
$(this).removeClass('subnav-show').dequeue();
});
});
});
You can try using this one by one: http://cherne.net/brian/resources/jquery.hoverIntent.html
source to share