Menu liste innestate con rollover, tenendo "attivo" l'elemento genitore

[alde90]

Ciao a tutti!
Avrei un piccolo problema per quel che riguarda le liste innestate, usando il rollover, evidenziando il percorso fornito per arrivare a quel link.

Cerco di spiegarmi meglio (gli esempi sono sempre utili):
Avendo un menu del genere:

<ul class="menu">
  <li class="parent active">Menu 1
    <ul>[*]Sottomenu 1
       <li class="parent active">Sottomenu 2
         <ul>
            <li id="current" class="active">Sotto-sottomenu 1[/list]
       
       <li class="parent">Sottomenu 3[/list]
  [*]Menu 2[/list] 

Avrei bisogno di tenere evidenziate le voci "Menu 1", "Sottomenu 2" e "Sotto-sottomenu 1" (ovvero quelli di classe active).

Subito mi sembrava una banalità, ma il problema si è cominciato a presentare quando si aggiungevano i livelli. Un discorso è prevedere al massimo 2 livelli, 3 a dir tanto, ma quando si pensa ad n-livelli, la situazione diventa un pelo più complicata.

A parte questo, il codice CSS che funziona sotto Firefox 3.5 è il seguente:

/*stili per il menu*/
ul.menu, ul.menu ul{margin: 0 0 10px 0;padding: 0; list-style-type: none; border-bottom:dashed 1px green}
ul.menu li.active ul{padding-left: 10px;}/*per le liste indentate*/
ul.menu li {margin: 0;padding: 0}
/*rollover*/
ul.menu a, ul.menu li.active li:not(.active) a {display:block; background:#063;color:#fff;padding:1px 4px;
		text-decoration: none;border-top:dashed 1px green}
ul.menu li.active a, ul.menu li.active a:hover {background: #fff;text-decoration: none; color:#063}
ul.menu a:hover, ul.menu li.active li:not(.active) a:hover{color: #033; background: #0f0;}

E funziona. Il problemino (ino?) è che usa i CSS3, super-mega-extra comodi, in particolare il selettore ":not", ovvvero seleziona tutti i figli di "active" che non sono di classe "active".

Il problema è, come spiega questo link, che i CSS3 non sono supportati su IE, in nessuna versione. Perciò, visto che non voglio (meglio, non posso, per questioni che poi chi visita il sito?) obbligare a usare uno specifico browser (firefox ), vorrei trovare un modo per poterlo visualizzare anche su IE (meglio se si potesse visualizzare sul 6, ma va più che bene anche dal 7 in su)

Provando un pò di cose, è venuto fuori questo:

ul.menu, ul.menu ul{margin: 0 0 10px 0;padding: 0; list-style-type: none; border-bottom:dashed 1px green}
ul.menu li.active ul{padding-left: 10px;}/*per le liste indentate*/
ul.menu li {margin: 0;padding: 0}
ul.menu a, ul.menu li.active li a {display:block; background:#063;color:#fff;padding:1px 4px;
		text-decoration: none;border-top:dashed 1px green}
ul.menu li.active li a {background:#063 !important;}
ul.menu li.active a{background: #fff !important;}
ul.menu li#current li a {background:#063 !important;color:#fff !important}
ul.menu li#current li a:hover {background: #0f0 !important;text-decoration: none; color:#033 !important}
ul.menu li.active a, ul.menu li.active a:hover {background: #fff;text-decoration: none; color:#063}
ul.menu li#current a{background: #fff !important;text-decoration: none; color:#063 !important}
ul.menu a:hover, ul.menu li.active li a:hover{color: #033; background: #0f0;}

che però visualizza come attivo il primo elemento (Menu 1) e l'ultimo (Sotto-sottomenu 1), "dimenticandosi" di quello in mezzo (Sottomenu 2).

Qualche idea??

Grazie in anticipo

PS: è un template per Joomla, quindi purtroppo non posso cambiare le classi, o aggiungere o togliere. Queste sono, e mi devo accontentare

[alde90]

Problema risolto: non avevo notato alcune interessanti caratteristiche dei CSS 2

Mi riferisco soprattutto al fatto del figlio (>), che ha brillantemente risolto il mio problema, ed è supportato da IE 7 (stando alle carte). Ho avuto la possibilità di testarlo solo sull'8, ma mi sembra vada bene. Ecco il CSS:

/*stili per il menu*/
ul.menu, ul.menu ul {margin: 0px 0px 20px 0px;padding: 0; list-style-type: none; border-bottom:dashed 1px green}
ul.menu ul{margin:0; padding-left:10px}/*per le liste indentate*/
ul.menu li {margin: 0;padding: 0}
/*rollover*/
ul.menu a, ul.menu li#current li a {display:block; background:#063;color:#fff;padding:1px 4px;
		text-decoration: none;border-top:dashed 1px green}/*colore normale a "riposo". */
ul.menu a:hover, ul.menu li#current li a:hover{color: #033; background: #0f0;} /*colore di rollover */
/* colore selezionato. Viene applicato solo ai collegamenti direttamente figli di li, quindi non alle sottoliste */
ul.menu li.active > a {background: #fff;text-decoration: none; color:#063}
ul.menu li#current a{background: #fff;text-decoration: none; color:#063}

Su IE6, si vedrà solo l'ultimo elemento selezionato. Pazienza, meglio di niente

[marco.carrieri]

Hai provato con IE8 la versione compatibilità?
Dovrebbe farti vedere il tutto come avessi il 7.

[alde90]

Certo, ho solo quello a disposizione, e si vede correttamente.

Poi mi sono accorto di avere anche la macchina virtuale, quindi provato con XP+IE6. Funziona parzialmente, si vede solo l'ultima voce evidenziata, ma meglio di niente no??

[marco.carrieri]

Certo....
:P Poi cavolo... siamo all'8... lo so che una buona percentuale usa ancora il 6... pero bisogna anche far capire ai clienti o chi deve ricevere il sito che... le cose si evolvono.