Salve a tutti ho un problema da porvi: ho seguito la seguente guida per creare una slider menu con css3 :
http://www.html.it/articoli/un-menu-...mmagini-e-css3

Di seguito il mio codice html:
<div id="containerPraimo">
<ul>[*]
<div class="titoloPraimo">
<h2>Praimo</h2>
</div>
<div class="immaginePraimo">
<div class="divContainerPraimo" style="border-bottom-color: rgb(248,170,72); background-color: rgb(248,170,72); border-top-color: rgb(248,170,72); margin: 0px; margin-left: 35px; display: inline; float: left; border-right-color: rgb(248,170,72); border-left-color: rgb(248,170,72)">
<font color="#0b4477" size="24">P</font><font color="#ffffff" size="9">raimo
</font>


Gestisci le tue attività e i rimborsi spese. </p>
<div class="AccediAreaPraimo">




Accedi
</p>
</div>
</div>
</div>
[*]
<div class="titoloPraimo">
<h2>Human Resource</h2>
</div>
<div class="immaginePraimo">
<div class="divContainerPraimo" style="border-bottom-color: rgb(11,68,119); background-color: rgb(11,68,119); border-top-color: rgb(11,68,119); margin: 0px; margin-left: 35px; display: inline; float: left; border-right-color: rgb(11,68,119); border-left-color: rgb(11,68,119)">
<font color="#f8aa48" size="24">H</font><font color="#ffffff" size="9">uman resources
</font>


Trovi i documenti tipo:CUD e Deduzioni.</p>
<div class="AccediAreaPraimo">




Accedi
</p>
</div>
</div>
</div>
[*]
<div class="titoloPraimo">
<h2>Document</h2>
</div>
<div class="immaginePraimo">
<div class="divContainerPraimo" style="border-bottom-color: rgb(155,79,150); background-color: rgb(155,79,150); border-top-color: rgb(155,79,150); margin: 0px; margin-left: 35px; display: inline; float: left; border-right-color: rgb(155,79,150); border-left-color: rgb(155,79,150)">
<font color="#ffffff" size="24">D</font><font color="#ffffff" size="9">ocument center
</font>


Gestisci le tue attività e i rimborsi spese. </p>
<div class="AccediAreaPraimo">




Accedi
</p>
</div>
</div>
</div>
[/list]
</div>


Qui invece il foglio di stile:
/* OverHide degli stili di Corev4 */
body {
font-family: "Trebuchet MS",helvetica,sans-serif;
}

.divContainerPraimo{
z-index:0;
font-weight:bold;
-webkit-box-shadow: 2px 2px 5px #777;
box-shadow: 2px 2px 5px #777;
height:195px;
width:400px;
border: 1px solid #021427;
-moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; -khtml-border-top-left-radius: 8px; border-top-left-radius: 8px;
-moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; -khtml-border-top-right-radius: 8px; border-top-right-radius: 8px;
-moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; -khtml-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; -khtml-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
}
.AccediAreaPraimo{
background: url('monotone_arrow_right.png') no-repeat ;
width:30px;
height:30px;
text-align:left;
float:right;
vertical-align:bottom;
margin-top:0px;
margin-bottom:25px;
margin-right:80px;

}
.AccediAreaPraimo A {
color:white;
text-decoration:none;
}
.AccediAreaPraimo A:link{
color:white;
text-decoration:none;
}
.AccediAreaPraimo A:hover{
color:white;
text-decoration:none;
}

.AccediAreaPraimo A:visited{
color:white;
text-decoration:none;
}

/*Gestione menù con Slider*/
*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/*classe che assegnamo al link del titolo per esterdere il link a tutto il div invece che solo del testo*/
a.block /*elemento. classe*/
{
display: block;
}

/*Resettiamo il bordo sulle immagini soprattutto per annullare un fastidioso effetto su IE
(spazio bianco di 1px intorno alle immagini racchiuse in un link)*/
img
{
border: 0;
}
/*Contenitore*/
#containerPraimo {
width: 500px;
height: 195px;
overflow: hidden; /*il di più che esce fuori viene nascosto*/
margin: 150px auto;
box-shadow: 0 0 15px 2px rgba(35, 56,78, 1);
-webkit-box-shadow: 0 0 15px 2px rgba(35, 56,78, 1); /* posizione ombra,posizione ombra, ampiezza ombra, profondità ombra,colore:rosso,giallo,blu,opacità*/
-moz-box-shadow: 0 0 15px 2px rgba(35, 56,78, 1);
}

/*La larghezza a 2000px è una piccola precauzione suggerita dall’autore dell’esprimento originario
per evitare problemi di flickering su alcuni browser,
specie sull’ultimo elemento. Margini e padding li azzeriamo come sempre quando vogliamo annullare gli stili di default delle liste,
altrimenti verrebbero rientrati al paragrafo come le liste.*/
#containerPraimo ul {
width: 2000px;
margin: 0;
padding: 0;
}

#containerPraimo li {
position: relative; /*Ci serve per posizionare più avanti il testo in verticale del titolo.*/
list-style: none;
margin: 0;
padding: 0;
display: block; /*Impostiamo la visualizzazione come blocchi e floattiamo a sinistra (TT i blocchi a sinistra).*/
float: left;
width: 166.6px; /*visualizzazioni in blocchi della lista nello stato iniziale del menù*/
height: 195px;
border-left: 1px solid #888;
box-shadow: 0 0 25px 15px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 25px 15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 25px 15px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
-webkit-transition: all 0.5s; /*effetto transizione per aperura e chiusura pannelli, IE9 non lo legge. + grande-> + tempo*/
-moz-transition: all 0.5s;
}


/*stile x il titolo*/
.titoloPraimo {
position: absolute; /*Per il posizionamento a sinistra basterà usare position: absolute e i valori left: 0 e top: 0.*/
left: 0;
top: -1px;
background: rgba(35, 56, 78,1); /*con trasparenza*/
-ms-transform: translateX(-100%) rotate(-90deg); /*Per disporre il testo verticalmente adoperiamo le trasformazioni CSS3. Nello specifico, ruotiamo di 90° il div in senso antiorario (-90°) e poi trasliamo verso sinistra. */
-ms-transform-origin: right top;
-webkit-transform: translateX(-100%) rotate(-90deg); /*Per disporre il testo verticalmente adoperiamo le trasformazioni CSS3. Nello specifico, ruotiamo di 90° il div in senso antiorario (-90°) e poi trasliamo verso sinistra. */
-webkit-transform-origin: right top;
-moz-transform:translateX(-100%) rotate(-90deg);
-moz-transform-origin:right top;
width: 197px; /*deve corrispondere all'altezza del contenitoer dato che è ruotato*/
height: 35px; /*impostati come larghezza decisa all'inizio, ma il relatà è l'altezza dato che è stato ruotato*/
}

.titoloPraimo h2 {
width: 195px;
height: 35px; /*Dichiariamo esplicitamente anche la larghezza e l’altezza con valori corrispondenti a quelli del div .titolo per una resa cross-browser più consistente.*/
margin: 0;
padding: 0px 0px;
font-size: 17px;
color: #FFFFFF;
}

/*Se è presente un link ad una pagina, il colore bianco viene sovrascritto dal blu link, quindi add questa*/
.titoloPraimo h2 a:link
{
width: 195px;
height: 35px; /*Dichiariamo esplicitamente anche la larghezza e l’altezza con valori corrispondenti a quelli del div .titolo per una resa cross-browser più consistente.*/
margin: 0;
padding: 0px 15px;
font-size: 17px;
color: #FFFFFF;
}

/*Per finire le due regole che gestiscono l’apertura e la chiusura dei pannelli. Sfruttiamo ovviamente la pseudoclasse :hover:*/

#containerPraimo ul:hover li {width: 35px;} /*Con la prima regola diciamo al browser di ridurre a 40px la larghezza dei pannelli (i li) quando si passa col mouse sulla lista ul.*/

#containerPraimo ul li:hover {width: 400px;} /*Nel contempo, il li che riceve l’hover e solo quello si allarga fino a 700px.*/


/*Per supporto a IE8 che non supporta nè trasformazioni che tyraslazioni inserire degli script condiziponali nell'head della
pagina e qui inoltre inserire anche questi stili:*/
.lt-ie8 .titoloPraimo {
position: absolute;
left: -125px;
top: 127px;
width: 195px;
height: 195px;
transform: rotate(-90deg); /*Il div sarà solo ruotato di -90°. Per posizionarlo dove ci interessa, invece che la traslazione, utilizziamo valori ad hoc per top e left.*/
background: #000;
}




Il mio problema è che voglio fare in modo che lo slider funzioni anche con IE9 che non supporta il tag transition, e lo voglio fare con jquery,
In parte sono riuscita nel mio intento aggiungendo questo codice:
<script type="text/javascript">


$(function () {
$('#menu2 li').mouseenter(function () {
$(this).animate({ width: "400px" }, 1000);
});

$('#menu2 li').mouseleave(function () {
$(this).animate({ width: "35px" }, 1000);
});
});
</script>

Solo che ho un prpoblema, come da guida il menù ha tre stati, quello allo stato iniziale, gli altri due al passaggio del mouse da un elemento li ad un altro in cui la dimensione del pannello atytuale si allarga alla dimensione stabilita e gli altri diventano stretti. Con questo codice non riesco a raggiungere lo stato iniziale: quando passo da un li all'altro la funzione mouseleave li fa diventare a 35 px le liste non attive, però fa queato anche quando esco da div esterno, in cui gli elementi dovrebbero diventare di 166.66 px come lo stato iniziale. Come posso fare con jquery?
Grazie in anticipo