将无序列表显示为水平二叉树

我在无序列表中有一个二叉树,如下所示:

<ul>
<li>1
    <ul> 
        <li>2
            <ul> 
                <li>4
                    <ul> 
                        <li>8</li> 
                        <li>--</li>
                    </ul> 
                </li> 
                <li>5</li> 
            </ul> 
        </li> 
        <li>3
            <ul> 
                <li>6</li> 
                <li>7</li> 
            </ul> 
        </li> 
    </ul> 
</li>

它显示为一个典型的无序列表。但这很难阅读和浏览。我需要一棵像这样的水平树:

http://www.knowledgerush.com/wiki_image/d/df/Binary_tree.png

我的问题是-这可以通过html/css单独完成,还是我需要使用javascript来完成?