html中的树结构

Question

我需要使用html和css创建树结构。

Structure should be like this.

目前的css和html：

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>

此结构可以有n个节点。

问题： 由于左边距（应用填充到显示层次结构），嵌套元素宽度小于根元素宽度，因此悬停背景颜色仅针对该特定宽度发生更改。

我想将所有li元素的宽度设置为根元素的100％，因此在活动背景颜色上将改变显示区域的100％宽度，但需要保持层次结构。

我想有css解决方案。

提前致谢。

Answer 1

您可以像这样更改CSS：

ul{
  list-style: none;
}

ul li{
  background: #F4F4F4;
}

ul li a{
  display:block;
}

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