Tree structure using CSS:

dabblet.css

/*
 Tree structure using CSS:
 http://stackoverflow.com/questions/14922247/how-to-get-a-tree-in-html-using-pure-css
*/

.tree, .tree ul{
  font: normal normal 14px/20px Helvetica, Arial, sans-serif;  
  list-style-type: none;
  margin-left: 0 0 0 10px;
  padding: 0;
  position: relative;   
  overflow:hidden;    
}

.tree li{
  margin: 0;
  padding: 0 12px;  
  position: relative;   
}
  
.tree li::before, .tree li::after{
  content: '';
  position: absolute;
  left: 0;
}

/* horizontal line on inner list items */
.tree li::before{
  border-top: 1px solid #999;
  top: 10px;
  width: 10px;
  height: 0;    
}

/* vertical line on list items */   
.tree li:after{
  border-left: 1px solid #999;
  height: 100%;
  width: 0px;
  top: -10px; 
}

/* lower line on list items from the first level because they don't have parents */
.tree > li::after{
  top: 10px;
}

/* hide line from the last of the first level list items */
.tree > li:last-child::after{
  display: none;
}

dabblet.html

   <ul class="tree">
    <li>Animals
     <ul>
      <li>Birds</li>
      <li>Mammals
       <ul>
        <li>Elephant</li>
        <li class="last">Mouse</li>
       </ul>
      </li>
      <li class="last">Reptiles</li>
     </ul>
    </li>       
    <li>Animals
     <ul>
      <li>Birds</li>
      <li>Mammals
       <ul>
        <li>Elephant</li>
        <li class="last">Mouse</li>
       </ul>
      </li>
      <li class="last">Reptiles</li>
     </ul>
    </li>
    <li class="last">Plants
     <ul>
      <li>Flowers
       <ul>
        <li>Rose</li>
        <li class="last">Tulip</li>
       </ul>
      </li>
      <li class="last">Trees</li>
     </ul>
    </li>
   </ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}