javascript - Displaying nested HTML ul list in columns -

i have autogenerated nested list structure, so

<ul>   <li>aaa</li>   <li>bbb     <ul>       <li>111         <ul>           <li>xxx</li>         </ul>       </li>       <li>222</li>     </ul>   </li>   <li>ccc</li>   ...etc... </ul> 

i want layout in columns so:

aaa    111    xxx bbb    222 ccc 

using jquery , few css tags, it's relatively easy create navigation style menu. e.g. select bbb first column, makes children appear in second column. other second level depth uls hidden.

what's leaving me stuck how style list in first place put depths columns. can add tags each ul or li show depth. if use relative positioning , move each column left, column 1 leave vertical gap each of entries have been moved across. absolute positioning works, doesn't seem neat. better ideas?

using recursive functions can quite straight-forward: http://jsfiddle.net/uvxfm/1/.

if want interactivity save elements children of parent , show appropriate ones on click.

var $tr = $("#tr");  function text(x) { // returns text without children     return x.clone()             .children()             .remove()             .end()             .text(); }  function add(elem, level) {     elem.children().each(function() { // iterate children         var $this = $(this);         var appendtothis = $tr.find("td").eq(level); // find td append level         var appendedtext = text($this) + "<br>"; // text append         if(appendtothis.length) { // if td exists             appendtothis.append(appendedtext);         } else { // if td doesn't exist yet             $tr.append($("<td>").append(appendedtext));         }         var children = $this.children();         if(children.length) { // call recursively children, if             add(children, level + 1);         }     }); }  add($("ul:eq(0)"), 0); // start process 

references: http://viralpatel.net/blogs/2011/02/jquery-get-text-element-without-child-element.html