悬停子菜单不起作用答案

【问题标题】：Hover submenu doesn't work悬停子菜单不起作用
【发布时间】：2017-05-26 02:18:46
【问题描述】：

我想创建一个子菜单，当我将鼠标悬停在 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>

【问题讨论】：

标签： html css hover submenu

【解决方案1】：

删除> 选择器，它就可以正常工作了。

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

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

查看代码 sn-p：

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

【讨论】：