html - 带有子菜单的 CSS 背景颜色

Question

我有以下html

<ul>
  <li class="main"> Main 1
    <ul>
      <li class="sub">Sub 1</li>
      <li class="sub">Sub 2</li>
      <li class="sub">Sub 3</li>
    </ul>
  </li>
  <li class="main"> Main 2 </li>
  <li class="main">Main 3 </li>  
</ul>

我希望background-color鼠标悬停时的第一级更改。但是当我尝试这段代码时

.main:hover {
  background-color: red;
}

.sub:hover {
  background-color: none;
}

子级菜单也发生了变化。有没有办法只改变外部元素的背景。

可以在此 codepen 中看到此代码。 http://codepen.io/anon/pen/Bvauf

Answer 1

你看到的是 的背景.main，因为孩子们的背景是透明的。您可以将其显式设置为白色：

.main:hover {
  background-color: red;
}

.main:hover > ul {
  background-color: #fff;
}

或者

.main ul {
  background-color: #fff;
}

Answer 2

.sub {
  background-color: white;
}

您应该像其他人建议的那样将背景颜色设置为 ul 而不是 li