避免UL LI中的列表重叠

Question

在下面的代码中，我不希望'level 2'列表项重叠。我怎样才能做到这一点。这是我的示例代码。

    <style type="text/css">
.tree-ul
{
    background:none;
    margin:0px 0px 0px -70px;
    padding:0;
    clear:both;

}
.tree-ul li {
clear:both;float: left;
position: relative;
display: inline-block;
height:100px;
width:100px;
border:solid #099 solid 1px;
background:#CCC;
list-style:none;
margin:5px 5px 0px 70px;

}
</style>
        <ul class="tree-ul">
            <li>Level 0



                <ul>
                    <li>Level 1



                        <ul>
                            <li>a Level 2</li>
                            <li>a Level 2</li>
                            <li>a Level 2</li>
                            <li>a Level 2</li>
                            <li>a Level 2</li>
                            <li>a Level 2</li>
                        </ul>
                    </li>
                    <li>Level 1</li>
                    <li>Level 1



                        <ul>
                            <li>b Level 2</li>
                            <li>b Level 2</li>
                            <li>b Level 2</li>
                            <li>b Level 2</li>
                            <li>b Level 2</li>
                        </ul>
                    </li>
                    <li>Level 1</li>
                    <li>Level 1</li>
                </ul>
            </li>
        </ul>

这个想法是垂直显示框而不重叠。 提前谢谢。