Ajax Loader
×
HTML
.tree
1
.tree
2
   ul
3
     li
4
       a(href='#') Parent
5
       ul
6
         li
7
           a(href='#') Child
8
           ul
9
             li
10
               a(href='#') Grand Child
11
         li
12
           a(href='#') Child
13
           ul
14
             li
15
               a(href='#') Grand Child
16
             li
17
               a(href='#') Grand Child
18
               ul
19
                 li
20
                   a(href='#') Great Grand Child
21
                 li
22
                   a(href='#') Great Grand Child
23
                 li
24
                   a(href='#') Great Grand Child
25
             li
26
               a(href='#') Grand Child
27
 
 
CSS
*
1
*
2
  margin: 0
3
  padding: 0
4
 
5
.tree ul
6
  padding-top: 20px
7
  position: relative
8
  transition: all 0.5s
9
  -webkit-transition: all 0.5s
10
  -moz-transition: all 0.5s
11
 
12
.tree li
13
  float: left
14
  text-align: center
15
  list-style-type: none
16
  position: relative
17
  padding: 20px 5px 0 5px
18
  transition: all 0.5s
19
  -webkit-transition: all 0.5s
20
  -moz-transition: all 0.5s
21
 
22
.tree li::before, .tree li::after
23
  content: ''
24
  position: absolute
25
  top: 0
26
  right: 50%
27
  border-top: 1px solid #ccc
28
  width: 50%
29
  height: 20px
30
 
31
.tree li::after
32
  right: auto
33
  left: 50%
34
  border-left: 1px solid #ccc
35
 
36
.tree li:only-child::after, .tree li:only-child::before
37
  display: none
38
 
39
.tree li:only-child
40
  padding-top: 0
41
 
42
.tree li:first-child::before, .tree li:last-child::after
43
  border: 0 none
44
 
45
.tree li:last-child::before
46
  border-right: 1px solid #ccc
47
  border-radius: 0 5px 0 0
48
  -webkit-border-radius: 0 5px 0 0
49
  -moz-border-radius: 0 5px 0 0
50
 
51
.tree li:first-child::after
52
  border-radius: 5px 0 0 0
53
  -webkit-border-radius: 5px 0 0 0
54
  -moz-border-radius: 5px 0 0 0
55
 
56
.tree ul ul::before
57
  content: ''
58
  position: absolute
59
  top: 0
60
  left: 50%
61
  border-left: 1px solid #ccc
62
  width: 0
63
  height: 20px
64
 
65
.tree li a
66
  border: 1px solid #ccc
67
  padding: 5px 10px
68
  text-decoration: none
69
  color: #666
70
  font-family: arial, verdana, tahoma
71
  font-size: 11px
72
  display: inline-block
73
  border-radius: 5px
74
  -webkit-border-radius: 5px
75
  -moz-border-radius: 5px
76
  transition: all 0.5s
77
  -webkit-transition: all 0.5s
78
  -moz-transition: all 0.5s
79
 
80
.tree li a:hover, .tree li a:hover+ul li a
81
  background: #c8e4f8
82
  color: #000
83
  border: 1px solid #94a0b4
84
 
85
.tree li a:hover+ul li::after, 
86
.tree li a:hover+ul li::before, 
87
.tree li a:hover+ul::before, 
88
.tree li a:hover+ul ul::before
89
  border-color: #94a0b4
90
 
 

Untitled

CSSDeck G+