Dropdown menu: IE e Mozilla non interpretano .hover()

[sslazio 1900]

Ciao a tutti!

Sto mettendo su il layout del mio sito, mi sto divertendo a studiare jQuery e devo dire che potenzialmente mi trovo benissimo, è veramente un framework potentissimo.

Ho qualche problema con Mozilla e IE9...

Guardate qui:
http://www.emilianoinnocenti.com/beta/layout/

Se con un browser webkit vi soffermate su "Portfolio" tutto funziona bene. Appena si passa a IE9 o Firefox ho un bel problema: praticamente, quando con il mouse ti sposti su un menu annidato nel dropdown è come se per il browser io avessi lasciato il li principale, non essendo più "hover" mi chiude il menu.

Non so se mi sono spiegato:
Portfolio
|----Paesaggi
|----|----Abruzzo
|----|----Salento
|----OnStage
|----|----Teatro
|----|----Concerti

Praticamente quando io sposto il puntatore su un elemento fra Abruzzo, Salento, Teatro o Concerti, per lui è come se io avessi abbandonato la lista in cui tutto è originato, e di conseguenza mi nasconde il menu.

Ripeto: con webkit va tutto bene, succede solo con mozilla e msie9!

Potete darmi una mano?

Codice:
JS

//MOZILLA CROSSBROWSER ISSUE
    //Posiziona il menu dropdown per i browser mozilla
    if ($.browser.mozilla || $.browser.msie) {
        
        $('ul#straight li ul').css({left: 0}); //Riposiziona il primo annidato
        
        //Riposiziona annidati di secondo livello in base alla larghezza del li che li contiene
        var wid = $('ul#straight li ul li ul').outerWidth(true);
        $('ul#straight li ul li ul').css({left:wid+5});
    }
    
        
    //Mouse hover per il menù principale
    //E per i dropdown menu
    $('ul#straight li').hover(function() {
        $(this).addClass('over', 300, 'swing');
        $('ul', this).stop(true, true).delay(500).slideDown(300, 'easeOutCirc'); //Dropdown show - viene sfruttato anche per gli annidati
        $('ul li ul',this).stop(true, true).css({display:'none'});    //Nasconde l'annidato che altrimenti verrebbe mostrato con ul padre
    }, function() {
        $(this).removeClass('over', 300, 'swing');
        $('ul', this).stop(true, true).delay(500).fadeOut(150).slideUp(300, 'easeOutCirc'); //Dropdown Hide
        $('ul li ul',this).stop(true, true).delay(500).fadeOut(150).slideUp(300, 'easeOutCirc'); //Annidato hide
    }); 

Markup:

<nav>
    	<ul id="straight">
        	[*]Latest Works[*]<a>Portfolio</a>
            	<ul>
                	[*]Paesaggi
                    	<ul>
                        	[*]Abbruzzo[*]Salento[*]Coste Laziali[/list]
                    [*]On Stage
                    	<ul>
                        	[*]Teatro[*]Concerti[/list]
                    [*]Wedding[*]Reportage[*]Nature[/list]
            [*]Chi Sono[*]Contatti[*]Links[/list]
    </nav>

CSS:

/******************** NAV STYLES ********************/
nav {
	margin: 0;
	position:fixed; 
	top: 80px; 
	left: 0;
	width:100%;
	
	background:#fff;
}

nav ul#straight {
	list-style-image:none;
	height:20px;
	
	font-family:'Marvel-Regular', Georgia, "Times New Roman", Times, serif;
	font-size:20px;
	color:#666;
	text-align:center;
}

nav ul#straight li {
	display:inline;
	margin: 0px;
	padding: 6px 12px 6px 12px;
	border: 1px solid #fff;
	border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	position:relative;
	
	line-height: 20px;
	text-shadow:1px 1px 0px #ddd;
}

nav ul#straight li a {
	color:#333;
	text-decoration:none
}

nav ul#straight li.over {
	background:#f1f1f1;
	border:1px solid #e3e3e3;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
	text-shadow:1px 1px 0px #fff;
}

	/*Dropdown Menu*/
	nav ul#straight li ul {
		position:absolute;
		z-index:10;
		padding:0;
		margin-top:5px;
		display:none;
		width: 150px
	}
	nav ul#straight li ul li {
		display:block;
		margin-top: 5px;
		
		background:#f5f5f5;		
		box-shadow: 0px 0px 2px 1px #e1e1e1
	}
	nav ul#straight li ul li ul {
		left:104%;
		top: -10px;
	}

[Xinod]

il problema lo vedo anche con chrome
quel left 104% delle sottocategorie e' troppo, se ti avvicini di piu' al 100% funziona bene

anche se come si trova al momento visivamente ti sembra corretto non lo e', perche' aggiungi box-shadow, il cui spessore non viene contato nel box-model

prova spostando gli[*] nelle sottocategorie verso destra e l' <ul> al 100% in modo che questa si sovrapponga almeno un po' al suo contenitore, tanto quello che si vede sono gli[*], non la lista

ciao

[sslazio 1900]

Originariamente inviato da Xinod
il problema lo vedo anche con chrome
quel left 104% delle sottocategorie e' troppo, se ti avvicini di piu' al 100% funziona bene

anche se come si trova al momento visivamente ti sembra corretto non lo e', perche' aggiungi box-shadow, il cui spessore non viene contato nel box-model

prova spostando gli[*] nelle sottocategorie verso destra e l' <ul> al 100% in modo che questa si sovrapponga almeno un po' al suo contenitore, tanto quello che si vede sono gli[*], non la lista

ciao

Si infatti ora notavo che lo fa meno, ma anche con Chrome.

Confermo inoltre che usando il margine invece di quella porcata che avevo scritto la cosa è quasi normale e crossbrowser

//Mouse hover per il menù principale
    //E per i dropdown menu
    $('ul#straight li').hover(function() {
        
        $(this).addClass('over', 300, 'swing', function() {
            $('ul', this).css({display: 'none'});
            $('ul:first', this).delay(150).slideDown(150, 'easeOutCirc');
        });
        
    }, function() {
        
        $(this).removeClass('over', 300, 'swing', function() {
            $('ul', this).delay(150).fadeOut(150, 'easeOutCirc');
            $(this).parent('ul').css({display: 'block'});
        });

    }); 

Ora il codice JS è questo, devo solo capire cosa succede in sporadici casi, in cui la lista di secondo livello resta visibile anche mouse out. Ma comunque già va nettamente meglio

[Xinod]

non stoppi fadeOut slideDown, hai delay che per natura non puoi cancellare
e' pure un po' involuto come parte il tutto: add/remove class di jquery UI, bello dispendioso
insomma, ci sarebbe da fare un po' di refactoring

[sslazio 1900]

Spiegati meglio per favore Non sono molto ferrato client side... specie con jquery.

Il delay mi serve non per stoppare, mi serve solo per rendere più smooth il passaggio del menu, nel senso che non devono "accendersi" liste child a mo di albero di natale, ma comparire solo se l'utente indugia quanto basta sul li parent.

In merito al dispendioso di addClass, removeClass di UI che intendi per dispendioso? Ci sono alternative per applicare quella data classe con un animazione invece che con i metodi standard di jQuery?

Abbi pazienza: sto biecamente approfittando della tua disponibilità (Grazieeee!)