menu verticale ad albero, problema con ie6

[mlipreri]

Ciao,
ho creato un menu verticale nel quale ogni voce può avere più figli, lo genero grazie ad una lista come questa:

<div id=menuContainer>
<ul>[*]<a href=index.php?action=3&id=61>Hygiene pro food</a>
	<ul>
	[*]aaaa
	[/list][*]<a href=index.php?action=3&id=67>dfs</a>[*]yyyy</a>[/list]
</div>

fino qui penso che sia corretta, il mio problema è che con explorer6 non funzia, se passo il mouse su "Hygiene pro food" non compaiono i figli, con firefox tutto ok, non riesco proprio a trovare l'errore che penso sia nel codice css che vi posto qui sotto:

#menuContainer {
  background-color: white;
  text-decoration: none;
  color: #666666;
  font-weight: bold;
  font-size: 10pt;
  font-family: Verdana, Arial, sans-serif;
  width: 10em;
  padding: 0px;
}

#menuContainer ul { 
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#menuContainer li {
  background-color: #cacaca;
  border: 1px solid #1d374f;
  width: 10em;
  /* this is to make the submenus position relative to this li */
  position: relative; 
}

#menuContainer a {
  text-decoration: none;
  color: #666666;
  font-weight: bold;
  font-size: 10pt;
  font-family: Verdana, Arial, sans-serif;
}

#menuContainer li:hover {
  border: 1px solid #1d374f;   
  background-color: #abe1f4;
}

#menuContainer a:hover {
  color: #1d374f;
}

#menuContainer ul ul {
  position: absolute;
  left: 10em;
  top: 0;
  visibility: hidden;
}


#menuContainer li:hover > ul {
  visibility: visible;
}

#menuContainer li:hover ul, #menuContainer li:hover li:hover ul {
  visibility: visible;
}

#menuContainer li:hover ul ul {
	visibility: hidden;
}

qualche idea?

[Mich_]

fino qui penso che sia corretta,

Pensi male.
I browser possono anche intepretare in modo corretto, ma possono anche confondersi.
Conviene sempre chiudere i tag che si sono aperti (obbligatorio nelle nuove versioni dello standard).
Prova a chiudere i tag :

<div id=menuContainer>
  <ul>[*]<a href=index.php?action=3&id=61>Hygiene pro food</a>
        <ul>[*]<a href=index.php?action=3&id=65>test</a>[*]new[*]<a href=index.php?action=3&id=68>aaaa</a>[/list]
    [*]<a href=index.php?action=3&id=67>dfs</a>[*]yyyy[/list]
</div>

[mlipreri]

ok, ora ho il codice come sopra da te indicato ma ancora niente...con ie6 non si schioda...idee?

[Mich_]

Ho visto altri errori di sintassi:
mancano le virgolette attorno ai valori degli attributi HTML, ed alcuni valori contengono caratteri significativi per l'HTML.

Prima di procedere con il CSS dovresti fare una verifica della sintassi HTML e CSS (usa i validatori del W3C).
Infatti nella logica di quel CSS non ci sono elementi che mi facciano ritenere probabile un non-funzionamento in IE (ma ci sono elementi che mi fanno ritenere probabile un funzionamento un po' diverso in IE).

[mlipreri]

Ok, ora risulta così:

<div id=menuContainer>
  <ul>		[*]Hygiene pro food
      <ul>	[*]test
	[*]new	
	[*]aaaa[/list]
     		[*]dfs[*]yyyy[/list]
</div>

Ma ho notato che con ie6 se passo il mouse su un[*] il css

#menuContainer li:hover {
  border: 1px solid #1d374f;   
  background-color: #abe1f4;
}

non ha effetto mentre questo si...

#menuContainer a:hover {
  color: #1d374f;
}

per la validazione non sembra che ci siano grossi problemi
http://jigsaw.w3.org/css-validator/v...ning=2&lang=en

[Mich_]

E` vero, non lo avevo notato.

In IE6 le pseudoclassi funzionano solo sui link, per cui devi usare il tag <a>, non il tag[*].
Questo non dovrebbe avere ripercussioni sulla struttura o sul codice, dato che tutti i tuoi oggetti che si aprono sono figli di link (questo lo avevo gia` verificato).

[mlipreri]

ma è questo che mi impedisce di fare uscire il sotto-menù figlio con ie6?
ho modificato il codice così:

#menuContainer li:hover > ul {
  visibility: visible;
}

#menuContainer a:hover > ul {
  visibility: visible;
}

#menuContainer li:hover ul, #menuContainer li:hover li:hover ul {
  visibility: visible;
}

#menuContainer a:hover ul, #menuContainer a:hover a:hover ul {
  visibility: visible;
}

#menuContainer li:hover ul ul {
	visibility: hidden;
}

#menuContainer a:hover ul ul {
	visibility: hidden;
}

ma senza risultato...

[mlipreri]

ho provato con ie7 e funziona...non riesco proprio a capire dove sbaglio

[Mich_]

Che complesso!! si puo` comunque semplificare.

L'operatore di discendenza diretta (il >) in IE6 non funziona. Occorre sostituirlo con l'operatore di discendenza (spazio).

Prova cosi`:

#menuContainer a:hover ul {
  /*visibility: visible;*/
  display: block;
}
#menuContainer a a:hover ul {
  /*visibility: visible;*/
  display: block;
}

Nota: mancano dei pezzi, in particolare:

#menuContainer a ul {
  /*visibility: hidden;*/
  display: none;
}
#menuContainer a a ul {
  /*visibility: hidden;*/
  display: none;
}

Il CSS per a DEVE PRECEDERE quello per a:hover, altrimenti viene sovrascritto!!

[mlipreri]

ho provato come mi hai detto ma ottengo sempre lo stesso risultato, ti posto il css in modo che mi puoi dire se è ok

body {
  margin:  0;
  padding: 15px;
}



#menuContainer {
  background-color: white;
  text-decoration: none;
  color: #666666;
  font-weight: bold;
  font-size: 10pt;
  font-family: Verdana, Arial, sans-serif;
  width: 10em;
  padding: 0px;
}

#menuContainer ul { 
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#menuContainer li {
  background-color: #cacaca;
  border: 1px solid #1d374f;
  width: 10em;
  /* this is to make the submenus position relative to this li */
  position: relative; 
}

#menuContainer a {
  text-decoration: none;
  color: #666666;
  font-weight: bold;
  font-size: 10pt;
  font-family: Verdana, Arial, sans-serif;
}

#menuContainer li:hover {
  border: 1px solid #1d374f;   
  background-color: #abe1f4;
}

#menuContainer a:hover {
  color: #1d374f;
  border: 1px solid #1d374f;   
  background-color: #abe1f4;
}

#menuContainer ul ul {
  position: absolute;
  left: 10em;
  top: 0;
  visibility: hidden;
}

/*...........NEW..........*/


#menuContainer a ul {
  display: none;
}

#menuContainer a a ul {
  display: none;
}

#menuContainer a:hover ul {
  display: block;
}


#menuContainer a a:hover ul {
  display: block;
}

/*...........END NEW..........*/

grazie mille