set css on ul li for hover

Question

this is my 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>

this is my csss:-

ul > li > ul {
    display: none;

}

li:hover > ul {
    display: block;
    }

i want to hover on Activties then Display Physical1 and Test1 and Test2.
i am try to above css but not success with them.
thanks.

Answer 1

To do a nested list you should put a <ul> element inside a <li> like that:

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

Then your CSS rule:

li:hover > ul {
  display: block;
}

will work.