Menu a tendina 3° livello

[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!