Have Geek Brain

HTML / CSS - headings for each "level" of the unordered list

I would like to take advantage of the hierarchical benefits of using nested unordered lists, but I need to define each "level" at the top as a table column header. For example, given this unordered list:

  •  
  • Product 1 
    •     
    • Part 1       
      •           
      • Subparts 1          
      • Section 2       
          
    • Part 2 
     
  • Product 2 
    •     
    • Part 1    
    • Part 2 

I would like all "Products" to be aligned with each other and have one heading at the top that says "Products". Then there will be a heading "Parts" and a heading "Subparts". I suppose I could just have the table directly above the unordered list and then align the levels, but I feel like there is probably a better way. Thank!

+2


source to share


2 answers


You can use a definition list (dl) and style your dt as headers and put your other lists in your dd's. This would be a good approach semantically if the list you are using is indeed a collection 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;}
+1


source 


<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   
+1


source






More articles:


All Articles