在ul li上设置css用于悬停

时间:2013-04-25 06:30:26

标签: html css

这是我的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,但没有成功 感谢。

1 个答案:

答案 0 :(得分:3)

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

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

然后你的CSS规则:

li:hover > ul {
  display: block;
}

会奏效。