.tree,
.tree ul {
    margin: 0;
    padding: 0 0 0 2.5em;
}

.tree li {
    list-style: none;
    position: relative;
    padding: 10px 0 0px 20%;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.tree li a{
    border: 1px solid #aaa;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;

    font-size: 18px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.tree li a:hover, 
.tree li a:hover ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover ul li::after, 
.tree li a:hover ul li::before, 
.tree li a:hover ul::before, 
.tree li a:hover ul ul::before{
    border-color:  #94a0b4;
}            


.tree li:only-child::after, .tree li:only-child::before {
                display: none; 

            }

           



.tree li:before {
    position: absolute;
    content: '';
    top: -0.01em;
    left: -0.7em;
    width: 21%;
    height: 1.5em;
    border-style: none none solid solid;    
    border-width: 0.05em;
    border-color: #aaa;
}

.tree li:last-child::before{
             
                border-radius: 0 0 0 5px;
                -webkit-border-radius: 0 0 0 5px;
                -moz-border-radius: 0 0 0 5px;
            }

.tree li:not(:last-child):after {
    position: absolute;
    content: '';
    top: 0.7em;
    left: -0.7em;
    bottom: 0;
    border-style: none none none solid;
    border-width: 0.05em;
    border-color: #aaa;
}