Problema compatibilità :hover con Internet Explorer

[yuri92]

Buonasera a tutti,
circa tre settimane fa ho fatto appello al vostro aiuto per un problema di :hover sulla barra di navigazione superiore (http://forum.html.it/forum/showthrea...readid=1532275) di un sito web che mi è stato commissionato.
Il sito è stato ultimato e non ci sono state altre complicazioni, naturalmente fino a quando non ho aperto Internet Explorer...
Dopo una settimana passata a risolvere tutti i problemi, l'unico e ultimo problema che mi è rimasto riguarda (ma vedi un po' la combinazione) proprio la barra di navigazione superiore, di nuovo!



Il problema è molto semplice, se osservate lo screen postato, su tutti i browser "normali" quando passo su una voce che ha un sottomenù (in questo caso SERVICES), mi compaiono le pagine sottostanti...
Con Explorer no!! Non appare il sottomenù!! Mi compaiono tutte come se fossero senza "figli" come HOME. Ora... è veramente una rogna aver finito tutto e presentare il sito con questo stupido cavillo, se ci fosse modo di risolverlo sarebbe la cosa migliore.
Vi posto come sempre HTML e CSS, sperando che anche questa volta ci sia una soluzione
Ringrazio tutti anticipatamente!!

Yuri

    <div id="drop-menu">
            <ul id="menu">
		    	<li class=topnav_on>HOME[*]PRODUCTS
                    <ul>[*]prodotto1[/list]
                [*]SERVICES
                    <ul>[*]Consulting[*]Integration[*]Support[*]Training[/list]
                [*]ABOUT US
                [*]CONTACTS
                    <ul>[*]Headquarters[/list]
                   	    	[/list]
        </div>

/*CSS*/

#drop-menu {
  margin: 76px 10px;
}

ul#menu {
  float: right;
  font-size: 80%;
  list-style: none outside none;
  margin: -8px 0 0;
  padding: 0;
}

ul#menu li {
  display: block;
  *display:block;
  float: left;
  margin-right: -14px;
  padding: 0;
  position: relative;
}
ul#menu li a {
  color: gray;
  float: left;
  font-size: 16px;
  padding: 10px 30px;
  text-decoration: none;
  text-transform: uppercase;
  color: #23547E;
}

ul#menu li:hover {
  background: none repeat scroll 0 0 #42AFDB;
}

.topnav_on {
  background: none repeat scroll 0 0 #F5F5F5;
  color: #23547E;
  border-top: 1px solid #D7D7D7;
  border-left: 1px solid #D7D7D7;
  border-right: 1px solid #D7D7D7;
}

ul#menu ul {
  background: none repeat scroll 0 0 #3492C2;
  color: black;
  display: inline-block;
  *display: inline;
  left: 0;
  list-style: none outside none;
  margin-top: -2px;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 43px;
  visibility: hidden;
  width: 168px;
  z-index: 9999;
}

ul#menu li:hover ul{
    opacity: 1;
    visibility: visible;
}

ul#menu ul li {
  border: 0 none;
  display: block;
  *display:block;
  float: none;
  text-align: left;
  margin: 1;
}

ul#menu ul a {
  border-bottom: 4px solid #94CAE6;
  color:white;
  display: block;
  *display:block;
  float: none;
  padding: 10px;
  text-transform: none;
  white-space: nowrap;
  width: 147px;
}

ul#menu ul a:hover {
  border-bottom: 4px solid blue;
  color:white;
  display: block;
  *display:block;
  float: none;
  padding: 10px;
  text-transform: none;
  white-space: nowrap;
  width: 147px;
}

ul#menu li a:hover {
  background: #42AFDB;
  color: #23547E;
}

[Mich_]

il problema e` li:hover
In IE (quirks mode) :hover e` applicabile solo ai link (tag <a>)

Puoi provare a far lavorare IE in standard mode, ed il problema dovrebbe risolversi.

IE lavora in quirks mode (modo retrocompatibile) se la DTD usata e` transitional (o non esiste)
IE lavora in standard mode se usi una DTD Strict (oppure quella di HTML5).

Se non sai cosa e` la DTD, vedi il tuo manuale HTML alla voce DOCTYPE.

[yuri92]

Grazie per la risposta, ma ci avevo già pensato e provato... senza successo.
Anche oggi sto perdendo una giornata su questa scemenza... vorrei aspettare oggi pomeriggio e almeno qualche altra risposta prima di ricominciare a rifare la barra completamente da capo senza usare le liste... spero in un vostro aiuto...

[slegolego]

ciao ,
premetto che non posso testarlo su IE in questo momento , ma potresti provare a inserire uno script in jquery in modo da far girare internet explorer come un browser moderno

prima cosa
aggiungi jquery (se gia' non lo fai, magari con un commento condizionale solo per IE)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

poi aggiungi in un file js a te piu' comodo questo piccolo script

$("ul#menu li ").hover(function() {
   $("ul#menu li  ul > li").toggleClass("hovered");
});

in questo modo ogni volta che :hover sul tuo listato di primo livello , aggiunge una classe "hovered" al listato di secondo livello

non resta che modificare il tuo CSS aggiungendo una linea (attorno alla riga 62)

ul#menu li:hover ul ,
ul#menu li ul li.hovered {
    opacity: 1;
    visibility: visible;
}

Ripeto non posso testarlo adesso su IE , ma potrebbe essere un workaround per risolvere il problema
In bocca al lupo

PS spero di non eessre OT

[yuri92]

Niente da fare, non ne vuole proprio sapere. Grazie davvero per l'aiuto, sono ormai sicuro di essere ad un passo dalla soluzione... speriamo
Altrimenti dopo pranzo mi tocca partire a rifarla da capo, usando javascript!!

[inexibrus]

Anche io ho avuto lo stesso problema con il menu, prova a prendere spunto da questo articolo.http://gabrieleromanato.com/2011/07/...a-accessibile/, questo è senza javascript e l'ho testato già su Explorer ...