Как сделать вложенный список
Короткий ответ
Положите новый список внутрь пункта <li> — после его текста:
<ul>
<li>Fruit
<ul>
<li>Apples</li>
<li>Pears</li>
</ul>
</li>
<li>Vegetables</li>
</ul>Браузер сам сдвинет вложенный список вправо и сменит маркер: круг, окружность, квадрат.
Свои маркеры для уровней
Маркер каждого уровня задаётся селектором вложенности:
<style>
ul { list-style-type: square; }
ul ul { list-style-type: "– "; }
</style>
<ul>
<li>Drinks
<ul><li>Tea</li><li>Coffee</li></ul>
</li>
</ul>Нумерация 1.1, 1.2
Многоуровневые номера, как в документах, строят на счётчиках CSS и функции counters():
<style>
ol { counter-reset: item; list-style: none; }
li::before { counter-increment: item; content: counters(item, ".") ". "; }
</style>
<ol>
<li>Setup
<ol><li>Download</li><li>Install</li></ol>
</li>
<li>Usage</li>
</ol>Частая ошибка
Вложенный <ul> ставят между двумя <li>, а не внутрь пункта. Внутри списка разрешены только элементы <li>, так что разметка получается неверной, а скринридер не понимает, к какому пункту относится подсписок:
<ul>
<li>Fruit</li>
<ul><li>Apples</li></ul>
</ul>Функции из этого ответа
- <ul> — Маркированный список: пункты, порядок которых не важен.
- <ol> — Нумерованный список: пункты, порядок которых важен.
- <li> — Пункт списка `<ul>`, `<ol>` или `<menu>`.
- list-style — Вид маркеров списка: тип, положение и картинка.
- content — Содержимое псевдоэлементов `::before` и `::after`.