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;}

代码示例

Answer 2

尝试这个，

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

Answer 3

我会使用 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>