user348173 user348173 - 1 year ago 148
CSS Question

CSS Vertical line for tree menu

I am making tree view for sub menu items and I am almost done. The problem with the last element, how it looks now:

enter image description here

I want to look it like:

enter image description here

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>


And styles:

.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


What is the best way to do it?

Answer Source

try to add to your CSS

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

check demo http://jsbin.com/tigepavemi/1/edit?html,css,output

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download