सीएसएस - सूची पेड़ पृष्ठभूमि मुद्दा

Question

मेरे पास एकाधिक अनुभागों की एक सूची है। मैं इसे एक प्रकार के पेड़ की तरह दिखने की कोशिश करता हूं। यह काफी अच्छी शुरुआत हुई लेकिन मैं अंतिम बिट्स को ठीक नहीं कर सकता।

कोड में पाया जा सकता:

http://jsfiddle.net/Kwfpm/

यहाँ यह कैसे काम करना चाहिए है

• पहले "Datorer", "Mjukvara" और "माइक्रोसॉफ्ट" एक क्षैतिज रेखा के साथ पेड़ से जुड़ा होना चाहिए।
• नीचे बाईं ओर "मुजुकवरा" "श्रेणी" से जुड़ा होना चाहिए।

कुछ बार-बार समस्याएं हैं लेकिन इन दोनों को हल करने के बाद हल किया जाना चाहिए।

ओपन और पेड़ को देखने के लिए करीब: http://jquery.bassistance.de/treeview/demo/prerendered.html

जानकारी

• मैं

  यहाँ यह कैसा दिखना चाहिए एक लिंक (गिर चीजों के बिना) है पता नहीं कितने स्तर हैं।

• एचटीएमएल को बदला नहीं जा सकता क्योंकि इसकी वर्डप्रेस
• द्वारा बनाई गई चीज़ों को दिखाने के लिए पृष्ठभूमि या सीमाओं का उपयोग करें।

JSfiddle आप इस का उपयोग कर सकते काम नहीं करते हैं:

सीएसएस

* { 
    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; 
} 

एचटीएमएल

<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

इस जावास्क्रिप्ट treeview पर एक नज़र डालें: http://krijnhoetmer.nl/stuff/javascript/list-treeview-menu/

यह वही संरचना है जैसा आप ली और उल के साथ पसंद करते हैं। शायद आप firebug के साथ इसे देख सकते हैं।