Создаем многоуровневый, вложенный список

В этой статье мы расскажем о том, как сделать многоуровневый список, или другими словами - вложенный.

Ни для кого не секрет, что за создание списков отвечают три тэга <ul>, <ol>, <li>. Где первый два отвечают за тип списка: <ul> - маркированный, <ol> - нумерованный, а тэг <li> создает новый пункт списка.

Вот как выглядит код простого маркированного списка:

<ul>
	<li>Первый пункт</li>
	<li>Второй</li>
	<li>Третий пункт</li>
	<li>Четвертый пункт</li>
</ul>

А вт как это выглядит на странице:

• Первый пункт
• Второй
• Третий пункт
• Четвертый пункт

Целью же этого урока будет помощь в создание такого списка:

• 1
  • 1.1
  • 1.2
    • 1.2.1
    • 1.2.2
  • 1.3
• 2
• 3
• 4

Это и называют многоуровневым или вложенным списком. Чтобы добавить вложенный список необходимо соответствующему пункту <li> добавить код нового списка и так далее.

Вот как будет выглядеть код списка, показанного выше:

<ul>
	<li>1
		<ul>
			<li>1.1</li>
			<li>1.2
				<ul>
					<li>1.2.1</li>
					<li>1.2.2</li>
				</ul>
			</li>
			<li>1.3</li>
		</ul>
	</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>