Question

I have a CSS3 Navigation Menu with no Javascript, I like how it is right now but there is one problem and the users are getting bothered with it.

The problem is that when a user hover over a Menu Link the submenu pops up which is exacly what I want but If user move the mouse arrow away from the submenu or the menu link, its dispairs ULTRA fast. It’s very annoying and I have no Idea how to fix this, there is two solutions one way is to always show the submenu the other solution is that when a user hover out from the submenu the submenu should atleast wait 5-10 secs before disappearing and also if you hover out and hover back the submenu should stay. But I have no idea how to do it.

Here is the code and example try it out, any solutions is appreciated!

http://jsfiddle.net/nPdNd/ expand the result window in Jsfiddle to see the whole nav menu

Thanks in advance!

Answer 1

Example: http://jsfiddle.net/nPdNd/40/

Using jQuery

$(document).ready(function(){
    var clearli;
    $(".test").hover(function() {
        clearTimeout(clearli);
        $("ul#nav li").removeClass('current');
        $(this).addClass('current');
    }, function() {
        var getthis = $(this);
        clearli = setTimeout(function() {
           $(getthis).removeClass('current');
        }, 500);
    });
});

Changed CSS

ul#nav li:hover > ul { to ul#nav li.current > ul {

ul#nav li:hover > ul li a { to ul#nav li.current > ul li a {

EDIT: I changed the selector due to a bug to .test and added class test to the <li>

EDIT2: I feel stupid, I forgot to stop the timeout counter. Edited above.