CSS3 垂直树状图——运用 :before 和 :after直接上图（原网址），还有步骤想详解视频。自己CSS3练习demo。
【demo】
【HTML】
<div class="tree"> <ul> <li> <a href="#">parent</a> <ul> <li> <a href="#">child</a> <ul> <li> <a href="#">Grant child</a> </li> </ul> </li> <li> <a href="#">child</a> <ul> <li><a href="#">Grant child</a></li> <li> <a href="#">Grant child</a> <ul> <li><a href="#">Great Grant child</a></li> <li><a href="#">Great Grant child</a></li> <li><a href="#">Great Grant child</a></li> </ul> </li> <li><a href="#">Grant child</a></li> </ul> </li> </ul> </li> </ul> </div>
【CSS3】
*{margin:0;padding:0;}.tree ul{padding-top:20px;position: relative;webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition:all .3s;}.tree li{float:left;list-style: none;text-align: center;position: relative;padding:20px 5px 0 5px;webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition:all .3s;}/*利用::before,::after作分支线*/.tree li::before,.tree li::after{content:"";position: absolute;top:0;right:50%;width:50%;height:20px;border-top:1px solid #ccc;}.tree li:after{right:auto;left:50%;border-left:1px solid #ccc;}.tree li:first-child::before,.tree li:last-child::after{border:0 none;}.tree li:last-child::before{border-right:1px solid #ccc;-webkit-border-radius: 0 10px 0 0;-moz-border-radius: 0 10px 0 0;border-radius: 0 10px 0 0;}.tree li:first-child::after{-webkit-border-radius: 10px 0 0 0;-moz-border-radius: 10px 0 0 0;border-radius: 10px 0 0 0;}
/*删除仅只有一个分支的分支线*/.tree li:only-child::before,.tree li:only-child::after{border:none;}.tree li:only-child{padding-top:0;}
/*添加仅只有一个分支的下分支线*/.tree ul ul::before{content:"";position: absolute;top:0;left:50%;border-left:1px solid #ccc;width:0;height:20px;}.tree a{display: inline-block;border:1px solid #ccc;padding: 5px 10px;color:#666;text-decoration: none;padding:10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition:all .3s;}
/*添加选中状态*/.tree li a:hover,.tree li a:hover+ul li a{background-color: #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;}