Что это такое и как бороться?

Question

[Kirito Asumo]

У нас есть такая структура:

<a href="/" class="sub">
	Тест 1
	<div class="sub-nav">
		<a href="/">Тест 2</a>
		<a href="/">Тест 3</a>
	</div>
</a>

Проблема в том что блок div выходит за пределы a, а именно после вывода в браузере в дереве html вижу такое:

<a href="/" class="sub">
	Тест 1                          </a>
<div class="sub-nav">
	<a href="/">Тест 2</a>
	<a href="/">Тест 3</a>
</div>

То есть блок выполз за пределы, как это называть и как это править?

a {
		display: inline-block;
		padding: 10px;
		font-size: 16px;
	}
	a:hover { background-color: aquamarine; }
	a.sub {
		.sub-nav {
			display: none;
		}
	}

Comments

[Андрей Федоров]

Браузер вам намекает, что не следует в интерактивный элемент вкладывать другие интерактивные элементы. )

[Kirito Asumo]

Андрей Федоров: Видимо он намекает на мою слегонца тупость :|

Answer 1

[Дмитрий Лузанов]

НЕЛЬЗЯ вкладывать ссылки друг в друга.

<li class="nav-item">
  <a href="/" class="sub">
    Тест 1
  </a>
  <div class="sub-nav">
    <a href="/">Тест 2</a>
    <a href="/">Тест 3</a>
  </div>
</li>

Comments

[Kirito Asumo]

Понятно. Некоторые сайты вкладывают ссылки друг в друга, возможно они просто методами js правят это.

[Дмитрий Лузанов]

Sparkis: с трудом верится. Покажите хоть один -_-

[Kirito Asumo]

Predve4niy: Не буду утверждать, ибо возможно я слепой)