html - 如何使用 css 选择器选择具有特定类的所有 li？

Question

我有一个包含 2 级的无序列表，我想隐藏“第一级子菜单”并仅在“第一级”li 悬停时显示它们。

这里是代码:

<ul>
      <li>first level</li>
               <ul>
                  <li>first level submenuitem 1</li>
                  <li>first level submenuitem 2</li>
               </ul>
      <li>another list item</li>
</ul>

我如何使用纯 CSS 选择器做到这一点？

Answer 1

像这样:

ul ul {display: none;}

ul li:hover ul {display: block;}

如果您可能有两个以上的级别，那么您可能想要更具体，例如:

ul li > ul {display: none;}

ul li:hover > ul {display: block;}

Code Example