Question: this is my html file:-

```
<div id="load">
<ul>
    <li>Activities
    <ul>
        <li>Physical1
        <ul>
            <li>Cricket
            <ul>
                <li>One Day</li>
            </ul>
            </li>
        </ul>
        </li>
        <li>Test1
    <ul>
        <li>Test At Abc</li>
    </ul>
    </li>
        <li>Test2
    <ul>
        <li>Test At Xyz</li>
    </ul>
        </li>
    </ul>
    </li>
</ul>
</div>

```

i want to set in to css hover.  

i dont konw about css hover much so give me suggestion for this.   

this is my output i needed.  

hover in `Acvivities` display 

```
Physical1 
Test1
Test2

```

hover in `Physcial1` display `Cricket`...   

thanks...

Answer: 
```
ul > li > ul {
    display: none;  // hide all submenus
}

li:hover > ul {
    display: block; // show sub menu when parent li is hovered
}

```

[DEMO](http://jsfiddle.net/bwTEx/)
```
ul li ul
{
    display:none;
}

ul > li:hover > ul
{
    display:block;
}

```

<http://jsfiddle.net/AyLYe/>