Html 带有子菜单的Css背景色

我有下面的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>

子级别菜单也会更改。是否有方法仅更改外部元素的背景

此代码可以在这个代码笔中看到。

---

您看到的是

.main

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

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

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

或

---

您看到的是

.main

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

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

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

或

您应该按照其他人的建议将背景色设置为ul而不是li

---

你应该像其他人建议的那样，将背景颜色设置为ul而不是li，哇，太快了。谢谢，就这样。现在有道理了。哇，太快了。谢谢，就这样。现在有道理了。

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

.sub {
  background-color: white;
}