title: set css on ul li for hover
body: <p>this is my html:-</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Activities&lt;/li&gt;
      &lt;ul&gt;
          &lt;li&gt;Physical1&lt;/li&gt;
          &lt;ul&gt;
              &lt;li&gt;Cricket&lt;/li&gt;
              &lt;ul&gt;
                  &lt;li&gt;One Day&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/ul&gt;
              &lt;li&gt;Test1&lt;/li&gt;
              &lt;ul&gt;
                  &lt;li&gt;Test At Abc&lt;/li&gt;
              &lt;/ul&gt;
                  &lt;li&gt;Test2&lt;/li&gt;
              &lt;ul&gt;
                  &lt;li&gt;Test At Xyz&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/ul&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>this is my csss:-</p>
  
  <pre><code>ul &gt; li &gt; ul {
      display: none;
  
  }
  
  li:hover &gt; ul {
      display: block;
      }
  </code></pre>
  
  <p>i want to hover on Activties then Display Physical1 and Test1 and Test2.<br>
  i am try to above css but not success with them.<br>
  thanks.</p>