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>

悬停子菜单不起作用

1 个答案: