Javascript 如何将行添加到<；李>；元素

我正在尝试创建一个树状视图或类似的东西。我的问题是，我对如何拖动这样的线没有任何想法：

这是我的代码：

<ul>
   <li>el1
     <ul>
        <li>el1.1
          <ul>
            <li>el1.1.1</li>
          </ul>
        </li>
        <li>el1.2</li>
     </ul>
  </li>
  <li>el2</li>
</ul>

el1

el1.1

el1.1.1


el1.2


el2

等等。可以用css做我想做的事情吗？我搜索了4个小时，什么也没找到。 附言：我一点也不擅长css

另外，还有一个问题：js可以创建树视图吗？只是简单的js，而不是复杂的插件或类似的东西。

试试：

---

有jquery插件可用于treeview@Ehsan是的，我知道，但这不是我的问题。我的问题是，如何使用css在图像中添加类似的行？如果工作已经完成，为什么要从头开始，使用effortlook查找

jstree

插件或goog它。我想你需要这个。@Jhon不完全是你想要的。看看这个，它很完美，正是我所需要的！谢谢。

ul{
    padding:0;
    list-style:none;
    border-left:1px solid #444;
}
ul li{
    padding-left:15px;
    position:relative; /* to allow :before pseudo element be absolute */
}
ul li:before{
    content:" ";
    height:1px;
    width:15px;        /* same as LI's padding */
    background:#444;
    position:absolute;
    top:0.7em;         /* ~half line-height */
    left:0px;          /* to properly align left */
}