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
Codice PHP:
//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:
codice:
<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:
codice:
/******************** 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;
	}