Всех приветствую. Ранее я уже писал несколько статей о списках, но сегодня речь пойдет о том, как делать в html вложенные списки. Мало того, не только их создавать, но и оформлять через css.
Начать нужно с того, чтобы хотя бы напомнить, как создается список вообще. Например, маркированный.
На скриншоте вы можете видеть код, который необходим для создания простейшего маркированного списка из трех пунктов. При этом тег ul непосредственно создает контейнер для пунктов списка, а li — это каждый его отдельный пункт. В каждом пункте может быть любое содержимое, в том числе и вложенный список. Нужно просто создать новый ul между открывающим и закрывающим тегом li. Это вы можете видеть на этом скрине:
То есть все на самом деле невероятно просто — всего лишь нужно вставить список в один из пунктов. Таким образом вы можете создавать списки любого уровня вложенности. Вот так это выглядит, если без css:
Как оформить через css вложенные списки?
О неплохом варианте оформления нумерованных списков я писал здесь, советую вам ознакомиться. Если же говорить о маркированных, то для их оформления обычно заменяют картинку маркера. О том, как это сделать, написано во второй части этой статьи.
Единственное, что нужно дополнить, это то, что для задания маркера родительскому списку используется просто селектор ul, но чтобы дотянуться до вложенного, нужно использовать такой селектор — ul ul. Вообще, если вы плохо разбираетесь в селекторах css, советую вам почитать данную статейку.
Соответственно, чем выше уровень вложенности, тем более точным должен быть селектор. Например, ul ul ul выберет все списки третьего уровня вложенности. Впрочем, в стандартной практике верстки лично мне пока никогда не приходилось работать с такими громоздкими списками.