Menu a tendina 3° livello

[GANDULE]

Ciao a tutti,
ho realizzato un menu a tendina su due livelli.

Tutto funziona alla perfezione, salvo che adesso che ho voluto inserire un terzo livello, ho un problema; infatti non appena vado sull'hover per visualizzare il primo livello, mi vengono mostrati anche i suoi livelli inferiori.

Ho provato ad impostare questa proprietà:

#div_menu ul li ul li ul
{
   display: none;
}

Ma non ottengo quanto sperato.

Potete vedere il problema a questo indirizzo
http://www.casavacanzegliulivi.com/i...id=124&lang=it

[deleted_20210415]

Ci potresti postare l'HTML del menù ed il CSS relativo?

[GANDULE]

Ci potresti postare l'HTML del menù ed il CSS relativo?

<div id="div_menu">
    <ul class="menu">
        <li class="item-101">
            <a href="/index.php?lang=it">Home</a>
        </li>
        <li class="item-123">
            <a href="/index.php">L'azienda turistica</a>
        </li>
        <li class="item-102 deeper parent">
            <span class="separator">Le nostre residenze</span>
            <ul>
                <li class="item-120 deeper parent">
                    <a class="_sublink1" href="/index.php">
                    <img alt="Residenza Via del Mare" src="images/Menu/res_viadelmare.jpg">
                    <span class="image-title">Residenza Via del Mare</span>
                    </a>
                    <ul>
                        <li class="item-136">
                        <a class="terzo" href="/index.php">Monolocale</a>
                        </li>
                        <li class="item-137">
                        <a class="terzo" href="/index.php">Bilocale</a>
                        </li>
                        <li class="item-138">
                        <a class="terzo" href="/index.php">Biloca Superior</a>
                        </li>
                        <li class="item-139">
                        <a class="terzo" href="/index.php">Trilocale Superior</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Mentre il CSS è questo

/*Sottomenu*/


#div_menu li ul
{
    display: none;
}

/* hover*/


#div_menu li:hover ul {
    display: block;
    position: absolute;
    z-index:1;
    width:250px;
    padding: 0px 0 2px 40px;
    margin: 0 0 0 100px;
}

#div_menu li:hover ul li
{
    background: #ffffff;
    margin: 4px 0 4px 0;
    padding: 5px 0 5px 10px;    
    border-radius: 8px;
}

#div_menu li ul li:hover span
{
    background-color: #ffffff !important;
    
}

#div_menu li ul li:hover a
{
    color: #9eb87b !important;    
}


#div_menu li:hover ul :nth-child(1)
{
    background-color: #9eb87b;
}

#div_menu li:hover ul :nth-child(2)
{
    background-color: #788C5D;
}

#div_menu li:hover ul :nth-child(3)
{
    background-color: #4f5c3d;
}


#div_menu li:hover ul a{
    color: #ffffff;
    padding: 0;
    background-color: transparent !important;
}

#div_menu li ul img{
    margin-top: 7px;
    border: 1px solid #ffffff;
}

#div_menu li:hover ul span{
    position: relative;
    top: -15px;
    padding: 6px;
    margin-left: 6px;
    width: 110px;
    display: inline-block;
    background-color: transparent !important;
    border-radius: 8px;
}






/******** TASTO PER NASCONDERE IL TESTO ***********/

#div_hidetext
{
    position: fixed;
    right: 0;
    width: 36px;
    height: 106px;
    cursor: pointer;
}


#img_shtext:hover
{
    opacity: 0.8;
}


/*************** TERZO LIVELLO DEL MENU *****************/


#div_menu ul li ul li ul
{
    display: none;
}

/* hover*/

[deleted_20210415]

Questo il codice corretto... Ricordati di rispettare la gerarchia CSS e di usare l'operatore di parentela ">" dopo l'attribuzione delle pseudo-classi

/*Sottomenu*/




#div_menu li ul
{
    display: none;
}


/* hover*/




#div_menu li:hover > ul {
    display: block;
    position: absolute;
    z-index:1;
    width:250px;
    padding: 0px 0 2px 40px;
    margin: 0 0 0 100px;
}


#div_menu li:hover > li
{
    background: #ffffff;
    margin: 4px 0 4px 0;
    padding: 5px 0 5px 10px;    
    border-radius: 8px;
}


#div_menu li li:hover > span
{
    background-color: #ffffff !important;
    
}


#div_menu li li:hover > a
{
    color: #9eb87b !important;    
}


#div_menu li:hover ul :nth-child(1)
{
    background-color: #9eb87b;
}


#div_menu li:hover ul :nth-child(2)
{
    background-color: #788C5D;
}


#div_menu li:hover ul :nth-child(3)
{
    background-color: #4f5c3d;
}




#div_menu li:hover > ul a{
    color: #ffffff;
    padding: 0;
    background-color: transparent !important;
}


#div_menu li ul img{
    margin-top: 7px;
    border: 1px solid #ffffff;
}


#div_menu li:hover > ul span{
    position: relative;
    top: -15px;
    padding: 6px;
    margin-left: 6px;
    width: 110px;
    display: inline-block;
    background-color: transparent !important;
    border-radius: 8px;
}












/******** TASTO PER NASCONDERE IL TESTO ***********/


#div_hidetext
{
    position: fixed;
    right: 0;
    width: 36px;
    height: 106px;
    cursor: pointer;
}




#img_shtext:hover
{
    opacity: 0.8;
}




/*************** TERZO LIVELLO DEL MENU *****************/




#div_menu ul li ul li ul
{
    display: none;
}


/* hover*/

[GANDULE]

Effettivamente adesso funziona... però sai che non ho capito bene la procedura?
Questo è il mio codice

#div_menu li:hover ul li

Che secondo il mio concetto... avrebbe dovuto "implementare la gerarchia" tutti i "li" figli di "ul" che
a sua volta sono figli di un "li" quando questo li viene "hoverato" assegna tali proprietà.


Mentre l'operatore di parentela che hai usato

#div_menu li:hover > ul

Che ragionamento adotta?

E pertanto, per attribuire stili diversi la menu di secondo livello, rispetto a quello di terzo; come posso assegnarli?


Grazie infinite!

[deleted_20210415]

Allora, per come funziona la parentela è molto semplice: l'operatore > in poche parole, messo dopo la pseudoclasse, seleziona SOLO il primo livello di elementi figli, in questo caso la lista ul.

Per attribuire uno stile diverso in base ai livelli, potresti provare così:

//Per il primo livello

#div_menu li {
  background: #CCC;
}

//Per il secondo livello

#div_menu li li {
  background: #DADADA;
}

//Per il terzo livello

#div_menu li li li {
  background: #999;
}

Poi è ovvio che sei liberissimo sia di selezionare gli elementi li o ul, e di dare come attributi quello che vuoi, non solo il background.
Come vedi qui non si sono usati gli operatori di parentela perché il foglio CSS, detto terra terra, per le non-interazioni (ti faccio l'esempio di prima con l' :hover) riesce ad attribuire la parentela anche senza gli operatori suddetti, ovvero:

La dicitura "li li li" indica:

Che il terzo elemento è il figlio del secondo;
Che il secondo elemento è il figlio del primo.

Spero con quest'ultimo esempio di essere stato chiaro.