在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>

这是我的csss： -

ul > li > ul {
    display: none;

}

li:hover > ul {
    display: block;
    }

我希望将鼠标悬停在Activties上，然后显示物理1和测试1以及测试2 我试着超过css，但没有成功 感谢。

Answer 1

要执行嵌套列表，您应该将<ul>元素放在<li>内，如下所示：

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

然后你的CSS规则：

li:hover > ul {
  display: block;
}

会奏效。