title: Best method for displaying a tree list using CSS only (no images or JS, example inside)
body: <p>I want to display something like this on a HTML page:
  <img src="https://i.stack.imgur.com/jOyl3.png" alt="enter image description here"></p>
  
  <p>With the restriction of using only CSS. <strong>The main problem lies in making these:</strong> <code>｜└ ├</code> "branches".</p>
  
  <p>The example above was a solution I done myself. Each branch has the same width and consists of:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The trick is to turn the borders of <code>&lt;li&gt;</code> black accordingly. An image to show this (just a quick mock up)
  <img src="https://i.stack.imgur.com/8TdFz.png" alt="enter image description here"></p>
  
  <p>A problem I've encountered is turning the border white to match the background instead of transparent (apparently CSS has some problem with transparent borders on lists).</p>
  
  <p><strong>My question is: what's the most simplest solution? Is there a better way to do this?</strong></p>
  
  <p>EDIT: Some requirements:</p>
  
  <ul>
  <li>The branch must have fixed width but the height must grow accordingly with the height of the table cell.</li>
  <li>The two <code>li</code> elements must take up half of the row's height each such that the <code>-</code> in <code>├</code> will always be in the middle.</li>
  </ul>
  
  <p>EDIT2: <a href="http://en.wikipedia.org/wiki/Template:Tree_list" rel="noreferrer">http://en.wikipedia.org/wiki/Template:Tree_list</a> did a little research. Alas, they use images for branches.</p>
  
  <p><strong>PS: As requested <a href="http://jsfiddle.net/q3zdB/2/" rel="noreferrer">http://jsfiddle.net/q3zdB/2/</a></strong></p>