I am trying to horizontally lay out an ordered list with multiple top level nodes while preserving the vertical layout of child nodes. For example, consider a basic list structure like this:
<ol>
<li>Top 1
<li>Sub 1</li>
<li>Sub 2</li>
</li>
<li>Top 2
<li>Sub 1</li>
<li>Sub 2</li>
</li>
</ol>
Instead of displaying these items in a traditional stacked hierarchy, I want each top level node to start a new column.
For instance, instead of:
Top 1
Sub 1
Sub 2
Top 2
Sub 1
Sub 2
I would like it to be rendered as:
Top 1 Top 2
Sub 1 Sub 1
Sub 2 Sub 2
The list can have up to a dozen top-level nodes and is nested up to 5 levels deep in some areas.
I know how to display the entire list horizontally, but I'm struggling with rendering only the top-level nodes horizontally while keeping their children in a vertical layout.
Any assistance on this matter would be greatly appreciated!