Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <style type="text/css">
- * {margin: 0; padding: 0;}
- .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;
- }
- .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;
- -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 #ccc;
- width: 0; height: 20px;
- }
- .tree li a{
- border: 1px solid #ccc;
- padding: 5px 10px;
- text-decoration: none;
- color: #666;
- font-family: arial, verdana, tahoma;
- font-size: 11px;
- 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 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;
- }
- </style>
- </head>
- <body>
- <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>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement