html - ホバー用に ul li に CSS を設定する

Question

これは私のhtmlです:-

<ul>
    <li>Activities</li>
    <ul>
        <li>Physical1</li>
        <ul>
            <li>Cricket</li>
            <ul>
                <li>One Day</li>
            </ul>
        </ul>
            <li>Test1</li>
            <ul>
                <li>Test At Abc</li>
            </ul>
                <li>Test2</li>
            <ul>
                <li>Test At Xyz</li>
            </ul>
    </ul>
</ul>

これは私の CSS です:-

ul > li > ul {
    display: none;

}

li:hover > ul {
    display: block;
    }

Activties にカーソルを合わせてから、Physical1 と Test1 と Test2 を表示します。
私はcssを超えようとしていますが、成功していません。
ありがとう。

Answer 1

ネストされたリストを行うには、次のように<ul>要素を内部に配置する必要があります。<li>

<ul>
  <li>Blah blah
      <ul>
          <li>Nested blah blah</li>
      </ul>
   </li>
</ul>

次に、CSS ルール:

li:hover > ul {
  display: block;
}

動作します。