Question

There is an issue with my jQuery navigation. It hasn’t got the usual setup of a navigation (ul > li > ul etc).
I’ve got a jsfiddle right here: http://jsfiddle.net/RMRGH/2/

If its more handy to place the code in this topic instead of a jsfiddle, let me know and I’ll paste it in here ;).

The CSS is a bit of a mess, but does the job =).
Because of the underlaying CMS(Joomla) I’m forced to use this setup.

The navigation seems unstable and I dont have enough jQuery-knowledge to figure out why.

When you hover over the items, quite fast from one to another. The menu become impossible to use because it slides up right away. Fiddle with it and you’ll see what I’m talking about (Quite hard to explain).

I’m unable to figure out the source of this problem and how to resolve it. I was hoping you people here at stackoverflow could help me out.

Thanks in advance!

Answer 1

I updated your fiddle: http://jsfiddle.net/RMRGH/6/

Seems the problem was the missing clearTimeout() in jQuery('#nav li').hover(function(){}..) that caused the timeout to continue even if you hovered the menu again, thus closing it.

here’s the code:

jQuery(document).ready(function(){

    var timer;
    var hover;

    jQuery('.moduletable-subNav > ul').hide();

    jQuery('#nav li').hover(
        function(){
            var id = jQuery(this).attr('data-number');
            jQuery('.moduletable-subNav > ul').slideUp();
            jQuery('#submenu-'+id).stop().slideDown();
            clearTimeout(timer);
        },
        function(){
            var id = jQuery(this).attr('data-number');
            timer = setTimeout(function() { jQuery('#submenu-'+id).slideUp(); },1000);
        }
    );

    jQuery('.moduletable-subNav ul').hover(
        function(){
            clearTimeout(timer);
        },
        function(){
            var id = jQuery(this).attr('id');
            timer = setTimeout(function() { jQuery('#'+id).slideUp(); },1000);
        }
    );
});
​