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

将工作。