html - 悬停子菜单不起作用

Question

我想创建一个子菜单，当我悬停在 Cath 上时，我想显示 Insider 和 Outsider。 (所有我想用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>
	</div>

Answer 1

删除 > 选择器，它将正常工作。

> 选择器仅适用于直接子元素，您的元素不是 cath 的直接子元素，这意味着您需要改用空格。

.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>
	</div>