title: What's the best way to show (un/ordered) HTML lists as a top-down tree?
body: <p>UL/OLs are can be easily styled/displayed for their natural flow i.e.:</p>
  
  <ul>
  <li>Root
  <ul>
  <li>Level 1 Item 1</li>
  <li>Level 1 Item 2
  <ul>
  <li>Level 1.1 Item 1</li>
  <li>Level 1.1 Item 2
  <ul>
  <li>Level 1.1.1 Item 1</li>
  </ul></li>
  </ul></li>
  <li>Level 1 Item 3</li>
  </ul></li>
  </ul>
  
  <p>And so on...</p>
  
  <p>...now we have a peculiar requirement to show this like a tree (like how one visualizied binary search trees) with the root at the top and the children nodes below it and so on all the way up to the leaf.</p>
  
  <p>It's argued that that's a better way of presentation of the content (each <code>li</code> is max 50 characters long). It's kinda more <em>intuitive</em> to see a top-down decomposition like tree structure with the root at the top. </p>
  
  <p>So the question is this: What' the most effective way to show the above list content as a top-down tree (instead of left-to-right as per the natural layout).</p>
  
  <p>We can't (and don't want) to use images. The users enter the data in a form like box and it shows up at the point of insertion (think of facebook comment-like feature for nested lists). Is there any way to 'transform' this using CSS, Javascript/Jquery into a tree like view?? (or create it 'as we move along'?). There cannot be a limit to the depth, but sideways scrolling is acceptable.</p>
  
  <p>In the natural layout (L-R) we can achieve the visual cue of children through indentation, color-coding and creative use of the border-visibility. I'm at my wits' end for even being able to display this visually like a tree with just HTML/CSS + javascript constructs. No experience in doing this.</p>
  
  <p>Any ideas/directions/pointers to articles/plug-ins to use/Off the shelf solutions etc., would be greatly appreciated!</p>