CSS -列表树背景问题

Question

我有一个包含多个部分的列表。我试着让它看起来像一棵树。开始的很好，但我不能修复最后的部分。

代码可以在：上找到

http://jsfiddle.net/Kwfpm/

这里是它应该如何工作的

• 第一个“数据器”、"Mjukvara“和"Microsoft”应该用一条角线连接到树上。
• 左下角的"Mjukvara“应该连接到"Kategorier”。

有一些反复出现的问题，但如果解决了这两个问题，就应该解决这些问题。

这里的是一个应该是什么样的链接(没有崩溃的东西)：

打开并关闭以查看树：http://jquery.bassistance.de/treeview/demo/prerendered.html

信息

• 我不知道有多少等级。
• HTML不能更改，因为它是由Wordpress生成的
• 使用背景或边框来显示你得到了什么。

如果JSfiddle不工作，可以使用以下方法：

CSS

    * {
    margin: 0;
    padding: 0;
}
.sidebar > ul > li {
    background: none;
}
li {
    padding-left: 20px;
    list-style: none;
    background: url('http://www.jenst.se/images/normal.png') repeat-y 10px 0;
    color: #333;
    font-family: Arial;
    font-size: 13px;
    line-height: 22px;
}
li a {
    color: #555;
}
li:last-child {
    background: url('http://www.jenst.se/images/lastchild.png') no-repeat 10px 0px;
}

HTML

<div class="sidebar default">
<ul>
    <li id="categories-10" class="widget widget_categories">
        <h4 class="title">Kategorier</h4>
        <ul> 
            <li class="cat-item cat-item-7"><a href="http://localhost/concepts/addmod/category/sjukt-lang-kategori-som-tar-for-mycket-plats/" title="Se alla inlägg sparade under Datorer">Datorer</a> 
            </li> 
            <li class="cat-item cat-item-3"><a href="http://localhost/concepts/addmod/category/testkategori/" title="Se alla inlägg sparade under Mjukvara">Mjukvara</a> 
                <ul class='children'> 
                    <li class="cat-item cat-item-4"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/" title="Se alla inlägg sparade under Hårdvara">Hårdvara</a> 
                        <ul class='children'> 
                            <li class="cat-item cat-item-6"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/underkategori-2/" title="Se alla inlägg sparade under Microsoft">Microsoft</a>
                            </li> 
                            <li class="cat-item cat-item-9"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/bla/" title="Se alla inlägg sparade under Office-paket">Office-paket</a> 
                            </li> 
                        </ul> 
                    </li> 
                </ul>
            </li>
            <li class="cat-item cat-item-3"><a href="http://localhost/concepts/addmod/category/testkategori/" title="Se alla inlägg sparade under Mjukvara">Mjukvara</a> 
                <ul class='children'> 
                    <li class="cat-item cat-item-4"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/" title="Se alla inlägg sparade under Hårdvara">Hårdvara</a> 
                        <ul class='children'> 
                            <li class="cat-item cat-item-6"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/underkategori-2/" title="Se alla inlägg sparade under Microsoft">Microsoft</a>
                            </li> 
                            <li class="cat-item cat-item-9"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/bla/" title="Se alla inlägg sparade under Office-paket">Office-paket</a> 
                            </li> 
                        </ul> 
                    </li> 
                </ul>
            </li>
        </ul> 
    </li>
    <li id="categories-10" class="widget widget_categories">
        <ul> 
            <li class="cat-item cat-item-7"><a href="http://localhost/concepts/addmod/category/sjukt-lang-kategori-som-tar-for-mycket-plats/" title="Se alla inlägg sparade under Datorer">Datorer</a> 
            </li> 
            <li class="cat-item cat-item-3"><a href="http://localhost/concepts/addmod/category/testkategori/" title="Se alla inlägg sparade under Mjukvara">Mjukvara</a> 
                <ul class='children'> 
                    <li class="cat-item cat-item-4"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/" title="Se alla inlägg sparade under Hårdvara">Hårdvara</a> 
                        <ul class='children'> 
                            <li class="cat-item cat-item-6"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/underkategori-2/" title="Se alla inlägg sparade under Microsoft">Microsoft</a>
                            </li> 
                            <li class="cat-item cat-item-9"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/bla/" title="Se alla inlägg sparade under Office-paket">Office-paket</a> 
                            </li> 
                        </ul> 
                    </li> 
                </ul>
            </li>
        </ul> 
    </li>
</ul>
</div>

Answer 1

我想通了。下面是一个工作代码：

http://jsfiddle.net/Kwfpm/3/

红色边框可以更改为背景图像的水平线。

Answer 2

看看这个javascript：http://krijnhoetmer.nl/stuff/javascript/list-treeview-menu/

它的结构和你喜欢的李和ul的一样，也许你可以用火虫来看看它。