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

我有一个无序的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>

一级

第一级子项1
第一级子项2

另一个列表项

如何使用纯CSS选择器实现这一点？

类似这样的内容：

ul ul {display: none;}

ul li:hover ul {display: block;}

如果您可能有两个以上的级别，那么您可能希望更具体，例如：

ul li > ul {display: none;}

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

试试这个

ul li:first-child:hover ul li {
   display: block;
} 

我会使用jQuery

<ul>
      <li class="show">first level</li>
           <ul class="child" style="display: none;">
              <li>first level submenuitem 1</li>
              <li>first level submenuitem 2</li>
           </ul>
  <li class="show">another list item</li>
</ul>

<script type="text/javascript" >
     $(".show").hover(function() {
     $(this).find('.child').show();

     });
</script>

第一级

第一级子项1
第一级子项2

另一个列表项

$（“.show”）.hover（函数（）{
$（this.find（'.child'）.show（）；
});

FWIW:您的层次结构不正确：

UL

不能是另一个

UL

的子级。您应该将其放在

LI

中。您需要实际为他们提供一个类，以便按该特定类进行选择……这要求标记是正确的，如代码示例中所示。在问题中的代码中，子菜单

ul

需要移动到外部列表的

li

中。