Baumstruktur in HTML

Question

Ich muss eine Baumstruktur mit HTML und CSS erstellen.

Structure should be like this.

Aktuelle CSS und HTML für diese:

ul{ 
 
    list-style: none; 
 
    } 
 
ul li{ 
 
    background: #F4F4F4; 
 
    } 
 
li.active{ 
 
    background: #B7E9FB!important; 
 
    }

<ul> 
 
<li class="drag-folder"> 
 
    <a href="javascript:void(0);"> 
 
    <span>TEST1.1</span> 
 
    </a> 
 
    <div class="nested-list"> 
 
    <ul style="display:block">     
 
     <li class="drag-folder"> 
 
     <a href="javascript:void(0);"> 
 
      <span>TEST1.2</span> 
 
     </a> 
 
     <div class="nested-list"> 
 
      <ul style="display:block">     
 
      <li class="drag-folder"> 
 
       <a href="javascript:void(0);"> 
 
       <span>TEST1.3</span> 
 
       </a> 
 
       <div class="nested-list"> 
 
       <ul style="display:block">     
 
        <li class="drag-folder"> 
 
        <a href="javascript:void(0);"> 
 
         <span>TEST1.4</span> 
 
        </a> 
 
        <div class="nested-list"> 
 
         <ul style="display:block">     
 
         <li class="drag-folder active"> 
 
          <a href="javascript:void(0);"> 
 
          <span>TEST1.5</span> 
 
          </a> 
 
          <div class="nested-list"> 
 
          <ul style="display:block">     
 
           <li class="drag-folder"> 
 
           <a href="javascript:void(0);"> 
 
            <span>TEST1.6</span> 
 
           </a> 
 
           </li> 
 
          </ul> 
 
          </div> 
 
         </li> 
 
         </ul> 
 
        </div> 
 
        </li> 
 
       </ul> 
 
       </div> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</li> 
 
</ul>

Diese Struktur n Anzahl von Knoten aufweisen kann.

Problem: verschachtelte Elemente Breite ist weniger als Root-Element Breite wegen der linken Füllung (Padding auf Display-Hierarchie angewendet), so auf Hover-Hintergrundfarbe ändert sich nur für diese bestimmte Breite.

Ich möchte die Breite aller li Element zu 100% des Wurzelelements so auf aktiven Hintergrund Farbe wird für 100% Breite des Anzeigebereichs ändern, aber Hierarchie beibehalten müssen.

Ich hätte gerne CSS-Lösung dafür.

Vielen Dank im Voraus.

Answer 1

Sie können Ihre CSS wie folgt ändern:

ul{ 
    list-style: none; 
} 

ul li{ 
    background: #F4F4F4; 
} 

ul li a{ 
    display:block; 
} 

li.active a{ 
    background: #B7E9FB!important; 
}