ホバーサブメニューが機能しない

Question

サブメニューを作成したいのですが、私がキャスターをホバーすると、インサイダーとアウトサイダーが表示されます。 （私はCSSで実現することにしたいすべてのもの）ここで

が私のコードですが、何か私のコードと誤解し

/* 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

が>セレクタを削除し、それだけで正常に動作します。

>セレクタは直接の子のみで動作しますが、要素はの子の子ではなく、です。つまり、代わりにスペースを使用する必要があります。

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

コードスニペットを参照してください：

/* 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>