Hover-Untermenü funktioniert nicht

Question

Ich möchte ein Untermenü erstellen, und wenn ich den Cath schweben, möchte ich den Insider und den Outsider anzeigen. (Alles, was ich will mit CSS erreicht werden)

Hier ist mein Code, aber etwas bekommen falsch mit meinem Code

/* ALL A HOVER */ 
 
.cath:hover > ul.submenu-items { 
 
    background:#778; 
 
} 
 

 
/* INNER UL HIDE */ 
 
.cath ul.submenu-items { 
 
    background:rgba(0,0,0,0.1); 
 
    padding-left:20px; 
 
    transition: max-height 0.2s ease-out; 
 
    max-height:0; 
 
    overflow:hidden; 
 
} 
 
/* INNER UL SHOW */ 
 
.cath:hover > ul.submenu-items{ 
 
    max-height:500px; 
 
    transition: max-height 0.25s ease-in; 
 
}

<div class='wr-element-container wr-element-submenu cath' ><div class="block-sub-menu"> 
 
    <a class=" caption" title="cath"><span class=""><span class="ig-menu-title">Cath </span></span></a> 
 
    <div class="clearfix"></div> 
 
    <span class="divider"></span> 
 
    <ul class="submenu-items "> 
 
    <li id="menu-item-1971" class="menu-item-1971"><a>Inside</a></li> 
 
    <li id="menu-item-1972" class="menu-item-1972"><a >Outside</a></li> 
 
    </ul> 
 
\t </div>

Answer 1

entfernen > Selektor und es wird gut funktionieren .

Die > Selektor funktioniert nur auf direkte Kinder, ist Ihr Element kein direktes Kind von cath, was bedeutet, dass Sie stattdessen Speicherplatz verwenden müssen.

.cath:hover ul.submenu-items{ 
     .... 
    } 

Siehe Code-Schnipsel:

/* ALL A HOVER */ 
 
.kathetou:hover > ul.submenu-items { 
 
    background:#778; 
 
} 
 

 
/* INNER UL HIDE */ 
 
.cath ul.submenu-items { 
 
    background:rgba(0,0,0,0.1); 
 
    padding-left:20px; 
 
    transition: max-height 0.2s ease-out; 
 
    max-height:0; 
 
    overflow:hidden; 
 
} 
 
/* INNER UL SHOW */ 
 
.cath:hover ul.submenu-items{ 
 
    max-height:500px; 
 
    transition: max-height 0.25s ease-in; 
 
}

<div class='wr-element-container wr-element-submenu cath' ><div class="block-sub-menu"> 
 
    <a class=" caption" title="cath"><span class=""><span class="ig-menu-title">Cath </span></span></a> 
 
    <div class="clearfix"></div> 
 
    <span class="divider"></span> 
 
    <ul class="submenu-items "> 
 
    <li id="menu-item-1971" class="menu-item-1971"><a>Inside</a></li> 
 
    <li id="menu-item-1972" class="menu-item-1972"><a >Outside</a></li> 
 
    </ul> 
 
\t </div>