html - css セレクターを使用して特定のクラスを持つすべての li を選択する方法は?

Question

2 レベルの順序付けられていないリストがあり、「第 1 レベルのサブメニュー」を非表示にして、「第 1 レベル」の 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;}

2 つ以上のレベルがある場合は、より具体的にする必要があります。たとえば、次のようになります。

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>