制作树形菜单css

树形菜单的基本结构

HTML结构通常使用嵌套的无序列表（<ul>和<li>）实现树形层级。以下是一个基础示例：

<ul class="tree">
  <li>父节点1
    <ul>
      <li>子节点1</li>
      <li>子节点2</li>
    </ul>
  </li>
  <li>父节点2</li>
</ul>

核心CSS样式

通过CSS控制缩进和交互效果：

.tree, .tree ul {
  list-style-type: none;
  padding-left: 20px;
}

.tree li {
  position: relative;
  margin: 5px 0;
}

.tree li:before {
  content: "";
  position: absolute;
  left: -15px;
  top: 10px;
  border-top: 1px solid #ccc;
  width: 15px;
}

展开/折叠功能实现

添加点击交互控制子菜单显示：

.tree ul {
  display: none;
}

.tree li.active > ul {
  display: block;
}

.tree li:after {
  content: "+";
  position: absolute;
  left: -20px;
  cursor: pointer;
}

.tree li.active:after {
  content: "-";
}

视觉增强样式

添加连接线和图标美化：

.tree li {
  border-left: 1px dashed #999;
  padding-left: 25px;
}

.tree li:last-child {
  border-left: none;
}

.tree li:before {
  height: 1px;
  background: #999;
}

完整交互示例

结合JavaScript实现动态切换：

document.querySelectorAll('.tree li').forEach(item => {
  if (item.querySelector('ul')) {
    item.addEventListener('click', function(e) {
      e.stopPropagation();
      this.classList.toggle('active');
    });
  }
});

响应式调整

针对移动端优化显示效果：

@media (max-width: 768px) {
  .tree li {
    padding-left: 15px;
    font-size: 14px;
  }
}