在ul列表中使用css set hover

Question

这是我的html文件: -

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

我想进入css悬停.
我不知道css悬停很多,所以给我这个建议.
这是我需要的输出.
悬停在Acvivities显示屏上

Physical1 
Test1
Test2

悬停在Physcial1显示屏上Cricket...
谢谢......

Answer 1

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

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

DEMO