html - 将 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 样式就完成了。
或浮动我认为它是可能的。任何帮助都来...
谢谢...