We're building a help system, one with a similar hierarchy as the salesforce help.  I've been having trouble finding documentation on structuring and populating nested lists using visualforce.  We have our content divided into custom objects as follows...

application - top level, not displayed, used to control the content being displayed in multiple customer portals
grouping - Above the list, names act as headers above the tree
category - these categories exand out to show topics
topic - When clicked these open directions in a div to the right of the menu.

so where I'm at...

I have a custom controller that populates the grouping list.  I'm not sure if this should even be a list since its the header for the lists contained with .

public class CODhelp {

List<grouping__c> grouping;

public List<grouping__c> getgrouping() {
if(grouping == null) grouping = [select name from Grouping__c where application__r.name = 'cod'];
return grouping;
}
}


Then I'm creating the list in the visualforce page using the following markup...

<apex:dataList value="{!grouping}" var="grouping__c" id="theList">
<apex:outputText value="{!grouping__c.name}" styleclass="treeHeader"/>
</apex:dataList>


This currently works to populate a list of grouping names for the application "cod".  However I need to go deeper for categories, topics and then the directions (which is a custom field of topic).

The html needed to generate our menu looks like this...

<ul class="tree">
<dt class="treeHeader">Grouping</dt>
<li class="closed"><a href="#">Category 1</a>
<ul>
<li><a href="directions">Topic 1</a></li>
<li><a href="directions">Topic 2</a></li>
</ul>
</li>
</ul>

Unfortunately, I'm at a loss on how to generate this structure using visualforce and populate it with the data from our custom objects.  I would greatly appreciate any suggestions or assistance on how to successfully achieve the desired result.

Thanks.