Question

我有一个使用纯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的情况下是否可行，或者找不到任何关于使用“＆gt;”的内容在CSS。

感谢任何帮助

Answer 1

:hover会在正在悬停的元素的所有祖先上触发，因此.navigation ul.menu li:hover { background: #ccc; }应该可以正常工作。

或者，有一天我们应该可以使用:has()。

Answer 2

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

悬停在嵌套项上会影响其父项吗？

2 个答案: