CSS - 列表樹背景問題

Question

我有一個包含多個部分的列表。我試圖讓它看起來像一棵樹。它開始相當好，但我無法修復最後一點。

的代碼，可以發現：

http://jsfiddle.net/Kwfpm/

下面是它如何工作

• 第一 「Datorer」， 「Mjukvara」 和 「微軟」應該連接到 與水平線的樹。
• 左下角的「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/

它的結構與你喜歡的LI和UL相同。也許你可以用firebug來看看它。