CSS树形菜单的垂直线

Question

我正在为子菜单项进行树视图，我差不多完成了。最后一个元素的问题，它现在看起来如何：

我想看起来像：

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

Answer 2

您可以在最后pseudoelement

上使用额外的li

.menu-items li {
  padding: 9px 0;
  list-style-type: none;
}

.menu-items li.active a {
  color: red;
  font-weight 700
}

.sub-items {
  padding-left: 15px;
  padding-top: 5px;
}

.sub-items li {
  position: relative;
  border-left: 1px solid #000;
}

.sub-items li::before {
  position: relative;
  top: -4px;
  width: 15px;
  border-bottom: 1px solid #000;
  content: '';
  display: inline-block;
}

.sub-items li:last-of-type {
  border-left: none;
}

.sub-items li:last-of-type:after {
  position: absolute;
  left: 0;
  top: 0;
  height: 18px;
  border-left: 1px solid #000;
  content: '';
  display: inline-block;
}

<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>

Answer 3

您可以在css中添加此代码

.menu-items .sub-items li {
    position: relative;
    border-left: 0px;
}

.menu-items .sub-items li:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1px;
    height: 100%;
    background: #000;
}
.menu-items .sub-items li:last-child:after {
    height: 50%;
}