Result
css
.tree ul {
padding-top : 20px ;
position : relative ;
}
.tree li {
float : left ;
text-align : center ;
list-style-type : none ;
position : relative ;
padding : 20px 5px 0 5px ;
}
.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 ;
}
.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 #ccc ;
border-radius : 0 5px 0 0 ;
}
.tree li:first-child::after{
border-radius : 5px 0 0 0 ;
}
.tree ul ul::before{
content : '' ;
position : absolute ;
top : 0 ;
left : 50% ;
border-left : 1px solid #ccc ;
width : 0 ;
height : 20px ;
}
.tree li a{
border : 1px solid #ccc ;
padding : 5px 10px ;
text-decoration : none ;
color : #666 ;
font-size : 11px ;
display : inline-block ;
border-radius : 5px ;
}
.tree li a:hover,
.tree li a: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 ;
}
|
html
< div class = "tree" >
< ul >
< li >
< a href = "#" >親</ a >
< ul >
< li >
< a href = "#" >子</ a >
< ul >
< li >
< a href = "#" >孫</ a >
< ul >
< li >
< a href = "#" >曾孫</ a >
</ li >
< li >
< a href = "#" >曾孫</ a >
</ li >
< li >
< a href = "#" >曾孫</ a >
</ li >
</ ul >
</ li >
</ ul >
</ li >
< li >
< a href = "#" >子</ a >
< ul >
< li >< a href = "#" >孫</ a ></ li >
< li >
< a href = "#" >孫</ a >
< ul >
< li >
< a href = "#" >曾孫</ a >
</ li >
< li >
< a href = "#" >曾孫</ a >
</ li >
< li >
< a href = "#" >曾孫</ a >
</ li >
</ ul >
</ li >
< li >< a href = "#" >孫</ a >
< ul >
< li >
< a href = "#" >曾孫</ a >
</ li >
< li >
< a href = "#" >曾孫</ a >
</ li >
< li >
< a href = "#" >曾孫</ a >
</ li >
</ ul >
</ li >
</ ul >
</ li >
</ ul >
</ li >
</ ul >
</ div >
|
via
CSS Family Tree