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

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>

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

3 个答案: