css绘制树结构图

收藏

分享一个用css制作的家族图谱效果，当你的鼠标悬浮在菜单上，会高亮显示子节点的菜单。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

结构图HTML代码

<div class="tree"> 
    <ul> 
        <li> 
            <a href="#">Parent</a> 
            <ul> 
                <li> 
                    <a href="#">Child</a> 
                    <ul> 
                        <li><a href="#">Grand Child</a></li> 
                    </ul> 
                </li> 
                <li> 
                    <a href="#">Child</a> 
                    <ul> 
                        <li><a href="#">Grand Child</a></li> 
                        <li> 
                            <a href="#">Grand Child</a> 
                            <ul> 
                                <li><a href="#">Great Grand Child</a></li> 
                                <li><a href="#">Great Grand Child</a></li> 
                                <li><a href="#">Great Grand Child</a></li> 
                            </ul> 
                        </li> 
                        <li><a href="#">Grand Child</a></li> 
                    </ul> 
                </li> 
            </ul> 
        </li> 
    </ul> 
</div>

CSS

.tree { 
    width: 760px; 
    margin: 40px auto 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 5px 0 5px; 
 
    transition: all 0.5s; - webkit - transition: all 0.5s; - moz - transition: all 0.5s; 
} 
 
/*We will use ::before and ::after to draw the connectors*/ 
 
.tree li: :before, 
.tree li: :after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 50 % ; 
    border - top: 1px solid#ccc; 
    width: 50 % ; 
    height: 20px; 
}.tree li: :after { 
    right: auto; 
    left: 50 % ; 
    border - left: 1px solid#ccc; 
} 
 
/*We need to remove left-right connectors from elements without  
            any siblings*/ 
.tree li: only - child: :after, 
.tree li: only - child: :before { 
    display: none; 
} 
 
/*Remove space from the top of single children*/ 
.tree li: only - child { 
    padding - top: 0; 
} 
 
/*Remove left connector from first child and  
            right connector from last child*/ 
.tree li: first - child: :before, 
.tree li: last - child: :after { 
    border: 0 none; 
} 
/*Adding back the vertical connector to the last nodes*/ 
.tree li: last - child: :before { 
    border - right: 1px solid#ccc; 
    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; 
} 
 
/*Time to add downward connectors from parents*/ 
.tree ul ul: :before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 50 % ; 
    border - left: 1px solid#ccc; 
    width: 0; 
    height: 20px; 
}