html - 树形菜单的 CSS 垂直线

Question

我正在为子菜单项制作 TreeView ，我快完成了。最后一个元素的问题，现在看起来如何:

我想看起来像:

DEMO

HTML:

  <ul class="menu-items">
    <li>
      <a href="#">Example 1</a>
    </li>
    <li>
      <a href="#">Tree</a>
      <ul class="sub-items">
        <li>
          <a href="#">Item 1</a>
        </li>
        <li>
          <a href="#">Item2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Example 2</a>
    </li>
    <li>
      <a href="#">Example 3</a>
    </li>
  </ul>

和样式:

.menu-items
  li
    padding 9px 0
    list-style-type none
    &.active
      a
        color $text-color
        font-weight 700

  .sub-items
    padding-left 15px
    padding-top 5px

    li
      position relative
      border-left 1px solid #000

    li::before
      position relative
      top -4px
      width 15px
      border-bottom 1px solid #000
      content ''
      display inline-block

最好的方法是什么？

Answer 1

尝试添加到你的 CSS 中

li:last-child {
 height: 1px;
}

查看演示 http://jsbin.com/tigepavemi/1/edit?html,css,output