像组织结构图一样显示HTML列表

Question

我无法为我的情况制作正确的CSS。鉴于以下列表：

<ul>
    <li>Charlie
        <ul>
            <li>Tim
                <ul>
                    <li>Chris</li>
                    <li>Mort</li>
                </ul>
            </li>
            <li>Julia
                <ul>
                    <li>Alice</li>
                    <li>Akuma</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

是否可以在CSS中创建这样的布局：

（我不需要连接它们的线条，但框架的布局）

修改

CSS：

ul {
    width:100%;
    float:left;
}
ul li {
    width:100px;
    height:50px;
    float:left
}

然后另一个ul li ul li开始变得混乱。