Как сделать многоуровневое меню?

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

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

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

В случае, когда мы хотим сделать многоуровневое меню, то нужно так же сделать многоуровневый список. А делается он по следующему принципу, в том <li>, в котором должны быть подпункту меню добавляют ещё одно одноуровневое меню <ul>. В итоге у вас по-умолчанию будет получается вертикальное многоуровневое меню.

Давайте рассмотрим пример:

<ul>
	<li><a href="/">Первый пункт</a>
		<ul>
			<li><a href="/">1.1</a></li>
			<li><a href="/">1.2</a></li>
			<li><a href="/">1.3</a></li>
		</ul>
	</li>
	<li><a href="/">Второй пункт</a></li>
	<li><a href="/">Третий пункт</a>
		<ul>
			<li><a href="/">3.1</a></li>
			<li><a href="/">3.2</a></li>
			<li><a href="/">3.3</a></li>
		</ul>
	</li>
	<li><a href="/">Четвертый пункт</a></li>
</ul>

А вот так это будет выглядеть:

• Первый пункт
  • 1.1
  • 1.2
  • 1.3
• Второй пункт
• Третий пункт
  • 3.1
  • 3.2
  • 3.3
• Четвертый пункт