html5 树状结构菜单 htmlcssjs树形图

HTML+CSS自定义树状图

• 主体部分
• css部分

主体部分

<div class="test">
    <ul class="domtree">
      <li>
        1级菜单
        <ul>
          <li>2级菜单</li>
          <li>
            2级菜单
            <ul>
              <li>3级菜单
                <ul>
                  <li>4级菜单</li>
                </ul>
              </li>
              <li>3级菜单</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>

css部分

.test {
  width: 100%;
  border: 1px solid red;
}

.test .domtree {
  margin: 20% 0 0 20%;
}
ul.domtree,
ul.domtree ul {
  margin: 0;
  padding: 0 0 0 2em;
}

ul.domtree li {
  list-style: none;
  position: relative;
}

ul.domtree > li:first-child:before {
  border-style: none none solid none;
  border-color: #fff;
}

ul.domtree li:before {
  position: absolute;
  content: "";
  top: -0.01em;
  left: -0.7em;
  width: 0.5em;
  height: 0.615em;
  border-style: none none solid solid;
  border-width: 0.05em;
  border-color: blue;
}

ul.domtree li:not(:last-child):after {
  position: absolute;
  content: "";
  top: 0.7em;
  left: -0.7em;
  bottom: 0;
  border-style: none none none solid;
  border-width: 0.05em;
  border-color: red;
}