*{margin:0; padding:0;}
.tree{height:500px; width:100%; margin:0 auto}
.tree ul{padding-top:20px; position:relative; transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s;}
.tree li{float:left; text-align:center; list-style-type:none; position:relative; padding:20px 0px 0 5px; transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s;}
.tree li::before, .tree li::after{content:''; position:absolute; top:0; right:50%; border-top:1px solid #400040; width:50%; height:20px;}
.tree li::after{right:auto; left:50%; border-left:1px solid #400040;}
.tree li:only-child::after, .tree li:only-child::before{display:none;}
.tree li:only-child{padding-top:0;}
.tree li:first-child::before, .tree li:last-child::after{border:0 none;}
.tree li:last-child::before{border-right:1px solid #400040; border-radius:0 5px 0 0; -webkit-border-radius:0 5px 0 0; -moz-border-radius:0 5px 0 0;}
.tree li:first-child::after{border-radius:5px 0 0 0; -webkit-border-radius:5px 0 0 0; -moz-border-radius:5px 0 0 0;}
.tree ul ul::before{content:''; position:absolute; top:0; left:50%; border-left:1px solid #400040; width:0; height:20px;}
.tree li a{border:1px solid #400040; padding:8px 16px; text-decoration:none; color:#330433; font-family:arial, verdana, tahoma; font-size:14px; font-weight:bold; 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 .like:hover+ul li a{background:#c8e4f8; color:#000; border:1px solid #94a0b4;}
.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;}