Ciao a tutti,
spero che qualcuno di voi, illuminati del CSS, sia in grado di darmi una mano...
Ho un menu a tendina realizzato coi CSS.
Non riesco a renderlo compatibile con ie7.
Nel senso che su ie8, ff, chrome funziona, mentre su ie 7 i sottolivelli sono tutti megadistanti tra loro.
Ecco il codice css...
codice:
#menu{
width:900px;
height:39px;
background-image:url(../../img/bg_menu.jpg);
vertical-align: top;
}
/*Qui: Elimininiamo margini, padding e marcatore da liste e list-item, definiamo l'altezza di linea del menu e gli stili di base dei link:*/

ul#nav,ul#nav li,ul#nav ul{ 

margin: 0;
padding: 0;
list-style: none;
line-height: 39px;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
z-index:1;
}

ul#nav a{
display: block;
padding: 0 1em; /*il secondo era un 1*/
text-decoration: none;
color:#FFFFFF;
background-image:url(../../img/bg_menu.jpg);

}

ul#nav a:hover{
color: #CCCCCC ;
}


/*affiancare i list-item di primo livello rendendoli float e posizionarli relativamente. Dovremo però aver cura di annullare l'effetto dei float sui list-item di secondo livello, grazie ad una regola più specifica:*/
ul#nav li{
float: left;
position: relative ; 
}

ul#nav li li{
float: none; /*Secondo livello di indentazione*/
} 

ul#nav ul{position: absolute; top: 3.3em;left: -9999px; width: 20em;} /* DA qui determino larghezza del ul del sottomenu*/
ul#nav li:hover ul{left: auto}
Non riesco a capire dove stia l'errore..
Voi che ne dite?


Grazie a chi mi darà una mano...