将鼠标悬停在嵌套的项目可以影响它的父？(Hover on nested item can affec

我一直在使用纯CSS菜单，鼠标悬停在一个父li项显示嵌套列表。 一个简单的例子：

  <ul id="menu-top" >
    <li class="menu-item">
      <a href="http://localhost/wp5/forums/">Forums</a>
      <ul class="sub-menu">
        <li><a href="http://localhost/wp5/register/">Register</a></li>
        <li><a href="http://localhost/wp5/activate/">Activate</a></li>
        <li><a href="http://localhost/wp5/members/">Members</a></li>
      </ul>
    </li>
  </ul>

CSS的：

.navigation ul.menu li:hover { background: #ccc} //hover the parent item changes it bg color

.navigation ul.sub-menu li {
 display:none;
}

.navigation ul li:hover > ul.sub-menu li { display: block; }

它的工作原理确定，但我想添加一个“老大难”的效果，我想也徘徊在分项目时保持父样式集。

我试过，但无法得到工作：

.navigation ul.sub-menu li:hover > .navigation ul.menu li { background: #ccc}

我不知道这是可能的，而不javscript否则，也无法找到任何使用“>”，在CSS。

谢谢你的帮助

Answer 1:

:hover触发对正在悬停在元件的所有祖先，所以.navigation ul.menu li:hover { background: #ccc; } .navigation ul.menu li:hover { background: #ccc; }应该只是罚款。

另外，有一天我们应该可以使用:has()

Answer 2:

.menu-item:hover {
     background-color:#ccc;
}
.sub-menu li:hover {
     background-color:#666;
}

文章来源: Hover on nested item can affect its parent?