Хоть для вашей страницы стили и не нужны, я все же сделал для вас кое-какие. Возможно, это поможет вам разобраться в этом.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Многоуровневый список покупок</title>
<style>
body { padding: 1rem; background: #ffffdd;}
body > ul {margin: 1rem; padding: 1rem; background: #ffaaff;}
body > ul > li {margin: 1rem; padding: 1rem; background: #ffddff;}
body > ul > li > ul {margin: 1rem; padding: 1rem; background: #ddffff;}
body > ul > li > ul > li { margin: 1rem; padding: 1rem; background: #ffdddd; }
body > ul > li > ul > li ul {margin: 1rem; padding: 1rem; background: #ddddff;}
body > ul > li > ul > li ul li {margin: 1rem; padding: 1rem; background: #ddffdd;}
</style>
</head>
<body>
<h1>Список покупок</h1>
<ul>
<li>Еда
<ul>
<li>Рыба
<ul>
<li>Филе форели, 2 шт</li>
<li>Карась, 5 шт</li>
<li>Окунь, 10 шт</li>
</ul>
</li>
<li>Молочные продукты
<ul>
<li>Сметана</li>
<li>Йогурт
<ul>
<li>Жирный</li>
<li>Обезжиренный</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Вещи
<ul>
<li>Игрушки
<ul>
<li>Когтеточка</li>
<li>Мячи, 2 шт</li>
</ul>
</li>
<li>Уход
<ul>
<li>Расчёска для шерсти</li>
<li>Мусс для усов</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
