CSS to create a simple tree structure with connecting lines. No images or JS required.

tree.css

   ul.tree, ul.tree ul {
    list-style: none;
     margin: 0;
     padding: 0;
   } 
   ul.tree ul {
     margin-left: 10px;
   }
   ul.tree li {
     margin: 0;
     padding: 0 7px;
     line-height: 20px;
     color: #369;
     font-weight: bold;
     border-left:1px solid rgb(100,100,100);

   }
   ul.tree li:last-child {
       border-left:none;
   }
   ul.tree li:before {
      position:relative;
      top:-0.3em;
      height:1em;
      width:12px;
      color:white;
      border-bottom:1px solid rgb(100,100,100);
      content:"";
      display:inline-block;
      left:-7px;
   }
   ul.tree li:last-child:before {
      border-left:1px solid rgb(100,100,100);   
   }

tree.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 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>

Took @RenateUSB solution and made it work with multiline items: https://jsfiddle.net/tomaskafka/ur1hvzy3/

right to left (rtl):
دوستان فارسی زبان سی اس اس راست چین برای نمایش درختی
https://jsfiddle.net/ykp2com3/