与边界的纯净的css树

简单的多级深度支持

更新:调整以适应悬停

不需要额外的HTML,因为css选择器链接不必限制深度,因为它支持任意数量的级别,而不必为这些级别调整你的css(没有跟踪"填充"以设置在下一级别深).

这只适用于两个小的限制(我不相信会影响你).

请参阅小提琴演示.

一个添加position: relative到您的ul.tree,但把所有的子元素的默认static位置.然后更改/添加以下css:

ul.tree a {
  display: block;
  height:30px;
  line-height: 30px;
  padding-left: 15px;
}

/* this is making our bottom border, but sizing off the .tree ul width */
ul.tree a:before { 
  content: '';
  height: 30px; /* match your <a> height */
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  border-bottom-width: 1px;
  border-bottom-color: lightgray;
  border-bottom-style: solid;
}


ul.tree a + ul {
    padding-left: 15px; /* this is your spacing for each level */
}

ul.tree a:hover:before {
  background-color: #DDDDDD;
}

限制是没有子元素可以有一个位置集,我们正在使用一个伪元素(这意味着它不能用于其他一些功能,但这可能也不是问题).