Delay for 1 second the disappearance of a dropdown menu when the mouse is moved away, unless it is returned

Question

Here is my HTML navbar

<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 the 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 the JavaScript from a jsfiddle and made it work out. I am quite competent in HTML and CSS, but apart from fairly obvious logic, I would say JavaScript is alien to me.

With the CSS it all looks like this:

I'm looking for a CSS snippet that, when I take my mouse OFF (hover(null)) of the dropdown menu and it doesn't disappear immediately, but rather delays until after a second, but won't disappear if i put my mouse back onto the menu before it does.

I have had a really good look, but couldn't find any answer on the site that not only addresses this precise issue directly but is also simple enough for me to understand.

Answer 1

DEMO I should say javascript is not a good solution of that case .. css is a very better way to achieve that .. 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: 10s; the submenu will disapear after 10s so wait for it

Answer 2

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, then use jQuery's addClass to set the display of that element to block. Add a delay, then create a queue item to remove that class.

$(document).ready(function () {    
    $('#mainnav li').hover(
        function () {
             $('ul', this).addClass('subnav-show').delay(2000).queue(function(){
                $(this).removeClass('subnav-show').dequeue();
            });               
        });
});

You could alternately try to use this: http://cherne.net/brian/resources/jquery.hoverIntent.html