HTML/CSS - Headings for each "level" of unordered list

Question

I would like to use the heirarchical benefits of using nested unordered lists, but I need to identify each "level" at the top like a table column header. For example, given this unordered list:

• Product 1
• Part 1
• Subpart 1
• Subpart 2
• Part 2
• Product 2
• Part 1
• Part 2

I would like it so that all "Products" are aligned with each other, and have a single heading at the top which says "Products". There would then be a "Parts" heading, and a "Subparts" heading as well. I suppose I could just have a table directly above the unordered list then make the levels line up with it, but I get the feeling there's probably a better way. Thanks!

Answer 1

You can use a Definition List (dl) and style your dt's as your headers and put your other lists in your dd's. This would be a good approach semantically if the list you are using is really a set of terms and their associated definitions.

Definition List Documentation

Example:

<dl>
<dt>Product 1</dt>
<dd>
   <ul>
     <li>Parts</li>
   </ul>
</dl>

/*CSS*/
dt{font-weight:bold;}

Answer 2

<ul>
<li>Product1
    <ul>
     <li>Part1
         <ul>
         <li>Subpart1</li>
         <li>Subpart2</li>
         </ul>
     </li>
     </ul>
</li>
</ul>

<ul>
<li>Product1
     <ul>
     <li>Part1</li>
     <li>Part1</li>
     </ul>
</li>
</ul>

Result:

• Product1
  • Part1
    • Subpart1
    • Subpart2

• Product 2
  • Part1
  • Part1