Menù orizzontale multilivello - problemi con selettori per abilitare il terzo livello

[KillerWorm]

Bene, allora ti indico dove sta l'errore. E' un po lungo da spiegare perché nel tuo elaborato si possono individuare diversi punti in cui si presenta una cattiva progettazione.

1) Per "nascondere" i menu di livello 2 usi questa regola:

.smenu 
{ 
    display: none;

dove la classe smenu è applicata agli elementi <a> che stanno dentro gli elementi <li> (di livello 2) che, a loro volta, stanno dentro i relativi <ul> (di livello 2).

Tieni a mente questo: di fatto non stai "nascondendo" tali elementi <li> e <ul> ma solo il loro contenuto <a>.

Per "aprire" questi menu di livello 2, utilizzi:

.menu li:hover a.smenu 
{
    display: block;

che sostanzialmente rende visibile l'elemento <a> quando si passa su un elemento <li> a lui ascendente (cioè un qualsiasi <li> che gli sta sopra gerarchicamente parlando).

Qui c'è già un "piccolo" problema: non avendo "nascosto" gli elementi <li> (o meglio, quelli <ul>) di livello 2, ma solo l'elemento <a> contenuto in questi, stai permettendo che restino sensibili alle azioni del mouse (in particolare all'hover) anche quando il menu di questo stesso livello è chiuso.

Infatti, anche se il loro contenuto <a> non occupa spazio, questi stessi elementi possono comunque occupare un certo ingombro, proprio come accade nel tuo elaborato. Di fatto ci sono gli elementi <li> di livello 3 che hanno dei margini e che influiscono sull'ingombro di questi <li> di livello 2.

Il "piccolo" problema, in questo caso, sta nel fatto che il menu di livello 2 si apre anche quando non si passa esattamente sulla voce del menu di livello 1, cioè semplicemente avvicinandosi da sotto, non appena avviene l'hover su questi elementi <li> "mezzo nascosti" di livello 2.

2) Per "nascondere" i menu di livello 3 usi questa regola:

.smenu2 
{ 
    display: none;

dove tale classe è applicata agli elementi <a> di livello 3, con lo stesso criterio sbagliato usato per il livello 2.

Per "aprire" questi menu di livello 3, utilizzi:

.smenu:hover .smenu2
{
    display: block;

dove stai letteralmente dicendo "quando sono sopra .smenu, cioè un qualsiasi elemento <a> di livello 2, allora apri gli elementi discendenti di questo, che abbiano la classe .smenu2"

... e qui l'errore: gli elementi <a> non hanno alcun discendente nella tua struttura HTML. La classe .smenu2 infatti non l'hai applicata ad elementi discendenti di quegli <a> ma, tuttalpiù, a elementi discendenti del fratello <ul> di <a>

Lo stesso errore lo hai fatto in questa regola:

.smenu ul
{
    display: none;    
}

dove suppongo avessi l'intenzione di nascondere gli elementi <ul> di livello 3 (il che sarebbe anche giusto, tornando al discorso del piccolo problema iniziale) ma, come ho appena spiegato, anche in questo caso tali elementi <ul> non sono discendenti di .smenu.

La cosa più logica sarebbe quella di determinare l'hover negli elementi <li>, come hai fatto per il livello 1, piuttosto che negli elementi <a>, quindi applicare il display per gli <ul> discendenti/figli.

Per il momento è tutto, fai sapere se riesci a capire come sistemare.
Buon proseguimento