HTML / CSS - заголовки для каждого «уровня» неупорядоченного списка

Question

Я хотел бы использовать иерархические преимущества использования вложенных неупорядоченных списков, но мне нужно определить каждый «уровень» вверху, как заголовок столбца таблицы. Например, учитывая этот неупорядоченный список:

• Продукт 1
• Часть 1
• Подраздел 1
• Подпункт 2

Часть 2 Продукт 2

• Часть 1
• часть 2

Мне бы хотелось, чтобы все «Продукты» были выровнены друг с другом и имели один заголовок вверху с надписью «Продукты». Затем будет заголовок «Детали» и заголовок «Подразделы». Я полагаю, что я мог бы просто иметь таблицу прямо над неупорядоченным списком, а затем привести уровни в соответствие с ней, но у меня возникает ощущение, что, возможно, есть лучший способ. Спасибо!

Answer 1

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

Результат:

• Product1
  • Part1
    • Subpart1
    • Subpart2

• Продукт 2
  • Part1
  • Part1

Answer 2

Вы можете использовать список определений (dl), стилизовать свои dt как заголовки и поместить другие списки в dd. Это было бы хорошим подходом семантически, если используемый вами список действительно представляет собой набор терминов и связанных с ними определений.

Документация по списку определений

Пример:

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

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