.tree ul{margin-left:20px}
.tree li{list-style-type:none;margin:10px;position:relative;cursor:pointer}
.tree li::before{content:"";position:absolute;top:-7px;left:-20px;border-left:1px solid #ccc;border-bottom:1px solid #ccc;border-radius:0 0 0 0;width:20px;height:15px}
.tree li::after{position:absolute;content:"";top:8px;left:-20px;border-left:1px solid #ccc;border-top:1px solid #ccc;border-radius:0px 0 0 0;width:20px;height:100%}
.tree li:last-child::after {display:none}
.tree li:last-child:before{border-radius:0 0 0 5px}
ul.tree>li:first-child::before{display:none}
ul.tree>li:first-child::after{border-radius:5px 0 0 0}
.tree li a{border:1px #ccc solid;border-radius:5px;padding:2px 5px}
.tree li a:hover, .tree li a:hover+ul li a,.tree li a:focus, .tree li a:focus+ul li a{background:#ccc; color:#000; border:1px solid #000}
.tree li a:hover+ul li::after, .tree li a:focus+ul li::after,.tree li a:hover+ul li::before, .tree li a:focus+ul li::before
.tree li a:hover+ul::before, .tree li a:focus+ul::before
.tree li a:hover+ul ul::before, .tree li a:focus+ul ul::before{border-color: #000}