Html 如何使用CSS连接树结构可视化中的子项

我想创建一个与线连接的项目和子项目的列表

到目前为止，我已经做到了这一点-

ul{
列表样式：无；
}
ul子菜单{
位置：相对位置；
填充：0；
左边距：30px；
边缘顶部：10px；
}
项目跨度{
位置：相对位置；
}
ul.子菜单li.项目跨度：：之前{
内容：''；
身高：100%；
宽度：10px；
边框底部：1px实心#000；
左边框：1px实心#000；
位置：绝对位置；
底部：10px；
左：-10px；
z指数：-1；
}

任务1
任务2

子任务1
子任务2

子任务1
子任务2


子任务3


任务3

我会像下面这样做：

.main{
溢出：隐藏；
}
保险商实验室{
列表样式：无；
填充：0；
左边距：30px；
边缘顶部：10px；
}
.项目{
位置：相对位置；
线高：1.2米；
}
.项目：：之前，
.项目：：之后，
.item:最后一个子菜单：：before{
内容：''；
背景：#000；
位置：绝对位置；
}
.项目：：之前{
宽度：10px；
高度：1px；
顶部：0.5em；
左：-10px；
}
.项目：：之后{
左：20px；
底部：0.6em；
顶部：1.2米；
宽度：1px；
}
/*如果没有子任务（不透明！），bekow将避免下线*/
.item:last child>。子菜单：：before{
顶部：钙（0.6em-1px）；
宽度：6px；
底部：0；
背景：#fff；
左-12px；
z指数：1；
}

任务1
任务2

子任务1
子任务2

子任务1
子任务2


子任务3

子任务1
子任务2

子任务1
子任务2


子任务3
子任务4




任务3

哦。。。非常感谢。我从来没有想过要把水平线和垂直线分开。@DebsmitaPaul做了一个更新来修正代码，以便涵盖所有的情况