在float中为位置设置ul li列表

Question

这是我的HTML代码： -

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

这是我的css： -

li{
color:red;
border-left:1px solid green;
}
li{
list-style:none;
}
ul > li > div > ul {
    display: none;  // hide all submenus

}

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

现在我想要这种类型的我的名单： -

我认为使用正确的位置css风格完成它 或浮动我觉得它可能。 任何一种帮助都很好...来 感谢...