Something

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

  <html>
  <head>
    <title>Squidster's thingy</title>
    <script type="text/javascript" charset="utf-8" src="jquery.js">
    </script>
    <script type="text/javascript" charset="utf-8">
    var width = 500;
    var items = 1;
    function hasclass_bind() {
      $(".hasChildren").unbind("click").bind("click", function() {
        items = parseInt($(this).parent().attr('elemcount'));
        $("#content-area select").each(function(i, n) {
          if(i > items - 1) {
            $(n).remove();
          }
        });
        select = document.createElement("select");
        $(select).attr({id: "taxo-select", elemcount: items, multiple: "multiple"});
        topheight = 0;
        items++;
        $("li[@tid="+ $(this).attr('name') +"]").children().children().each(function(i, n) {
          option = document.createElement("option");
          $(option).attr('class', 'taxo-option');
          $(option).attr('name', $(n).attr("tid"));
          $(option).text($(n).attr('text'));
          if($(n).children().length > 0) {
            $(option).append("<span>&nbsp;</span>");
            $(option).addClass("hasChildren");
          }
          $(select).append(option);
          $("#content-area").append(select).children().width(width/items).each(function(i, n) {
            if($(n).height() > topheight) {
              topheight = $(n).height();
            }
          }).height(topheight + 6);
          setInterval("hasclass_bind();", 100);
        });
      });
    }
    $(document).ready(function() {
      select = document.createElement("select");
      $(select).attr('id', 'taxo-select');
      $(select).attr('elemcount', items);
      $(select).attr('multiple', 'multiple');
      $("#content-area").append(select);
      $('#c').hide().children().each(function(i, n) {
        option = document.createElement("option");
        $(option).attr('class', 'taxo-option');
        $(option).attr('name', $(n).attr("tid"));
        $(option).text($(n).attr('text'));
        if($(n).children().length > 0) {
          $(option).append("<span>&nbsp;</span>");
          $(option).addClass("hasChildren");
        }
        $("#taxo-select").append(option);
      });
      hasclass_bind();
    });
    </script>
    <style type="text/css" media="screen">
      #taxo-select {
        width: 500px;
        overflow: scroll;
      }
      .taxo-option span {
        background-color: red;
        float: right;
        margin-top: -16px;
        width: 15px;
      }
    </style>
  </head>
  <body>
    <div id="content-area">
    </div>
    <ul id="c">
      <li tid="1" text="Computer Science">
        <ul>
          <li tid="16" text="AJAX!!!"></li>
          <li tid="2" text="Fiction"></li>
          <li tid="3" text="Mystery"></li>
          <li tid="4" text="Option A"></li>
          <li tid="5" text="Option B"></li>
          <li tid="2" text="Fiction"></li>
          <li tid="3" text="Mystery"></li>
          <li tid="4" text="Option A"></li>
          <li tid="5" text="Option B"></li>
        </ul>
      </li>
      <li tid="2" text="Fiction"></li>
      <li tid="3" text="Mystery"></li>
      <li tid="4" text="Option A"></li>
      <li tid="5" text="Option B"></li>
      <li tid="6" text="Option C">
        <ul>
          <li tid="7" text="It's fun"></li>
          <li tid="8" text="making all"></li>
          <li tid="9" text="these nested">
            <ul>
              <li tid="10" text="How deep can we go?">
                <ul>
                  <li tid="11" text="Here?">
                    <ul>
                      <li tid="12" text="How about here?"></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li tid="13" text="options!">
            <ul>
              <li tid="14" text="yup, options are"></li>
              <li tid="15" text="awesome"></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>