Dropdown MegaMenu e BigMenu

[pratovecchio]

Dropdown MegaMenu e BigMenu

Salve a tutti,
Da un po' di tempo a questa parte mi sono reso conto che il mio sito ha un menù non molto friendly, vi spiego il mio problema:

Quando passiamo, anche per sbaglio, il mouse sopra un link del menù, il dropdown si apre subito coprendo gran parte dello schermo, diciamo senza avere un attimino di sensibilità, cosa fastidiosissima.
Un altro problema è che, se sono interessato ad un link del menù e per sbaglio il mouse passa sopra al link di fianco, apre subito quello di fianco, infastidendo ancora di più l'utente.

Per spiegarmi per bene ecco un'immagine:
i61.tinypic.com/2isy2ia.jpg

In poche parole sono alla ricerca di una soluzione che possa far aprire il dropdown dopo un TOT di millisecondi (Es. 500), così da aprirlo solo quando l'utente si sofferma su di esso per quel lasso di tempo.

Le ho provate di tutte, ma non sono riuscito a trovare una soluzione, potete aiutarmi?

Ecco il codice del menu:

        var show_dropdown = function (t) {


                var options,
                    marginRight,
                    submenuWidth,
                    offsetMenuRight,
                    leftPos = 0,
                    containerWidth = $header.width(),
                    dropdown = $(t);


                if ( dropdown.is('#lang_sel ul > li') ) {
                    marginRight = dropdown.css('margin-right');
                    submenuWidth = dropdown.find('ul').outerWidth();
                    offsetMenuRight = dropdown.position().left + submenuWidth;


                    if ( offsetMenuRight > containerWidth )
                        options = { left: leftPos - ( offsetMenuRight - containerWidth ) };
                    else
                        options = {};


                    dropdown.find('ul li').parent().css(options).stop(true, true).fadeIn(300);


                } else if ( dropdown.hasClass('megamenu') ) {
                    dropdown.find('ul.sub-menu:not(ul.sub-menu li > div.submenu > ul.sub-menu), ul.children:not(ul.children li > div.submenu > ul.children)').parent().stop(true, true).fadeIn(500);


                } else if ( dropdown.hasClass('bigmenu') ) {
                    dropdown.find('ul.sub-menu:not(ul.sub-menu li > div.submenu > ul.sub-menu), ul.children:not(ul.children li > div.submenu > ul.children)').parent().stop(true, true).fadeIn(500);


                } else if ( dropdown.hasClass('login-menu') ) {
                    submenuWidth = dropdown.find('ul.sub-menu').outerWidth();
                    offsetMenuRight = dropdown.position().left + submenuWidth;


                    if (offsetMenuRight > containerWidth)
                        options = { left: leftPos - ( offsetMenuRight - containerWidth ) };
                    else
                        options = {};


                    dropdown.find('.login-box').parent().css(options).stop(true, true).fadeIn(300);
                } else {
                    submenuWidth = dropdown.find('div.submenu').outerWidth();
                    offsetMenuRight = dropdown.position().left + submenuWidth;


                    if (offsetMenuRight > containerWidth)
                        options = { left: leftPos - ( offsetMenuRight - containerWidth ) };
                    else
                        options = {};


                    dropdown.find('ul.sub-menu:not(ul.sub-menu li > div.submenu > ul.sub-menu), ul.children:not(ul.children li > div.submenu > ul.children)').parent().css(options).stop(true, true).fadeIn(300);
                }


            },


            hide_dropdown = function (t) {
                var dropdown = $(t);


                dropdown.find('ul.sub-menu:not(ul.sub-menu li > div.submenu > ul.sub-menu), ul.children:not(ul.children li > div.submenu > ul.children)').parent().fadeOut(300);
                $('.login-box').parent().fadeOut(300);
            };

questa è la parte del codice che azionerebbe il menu:

$('.nav').on( 'mouseenter mouseleave', 'ul > li', function(e){
           if ( e.type == 'mouseenter' ) show_dropdown( this );
           else if ( e.type == 'mouseleave' ) hide_dropdown( this );
       });