Как исправить этот фон выпадающего меню второго уровня?

Question

Я очень доволен своим выпадающим меню, но есть одна часть, которую я не могу понять правильно.

Это последний пункт меню (Switch City), второй уровень выпадающего меню расширяет фон1-го уровня.

Я сделал ручку из этого: https://codepen.io/pascalgarrix/pen/byNLEM

Я почти уверен, что проблема в CSS лежит как раз перед медиа-запросами в этой части:

nav ul ul ul {
position: relative;
/* has to be the same number as the "width" of "nav ul ul li" */
top: -60px;
left: 270px;

}

Если бы кто-нибудь мог быстро взглянуть, это было бы здорово!

PS Все меню основано на этой ручке: https://codepen.io/andornagy/pen/RNeydj

Answer 1

Вам необходимо задать максимальную высоту вложенного уровня 1-го уровня, чтобы предотвратить его рост, но при этом разрешить переполнение

nav ul li ul li:hover, nav ul li ul li ul li:hover { background-color: rgba(0,0,0,0.2); max-height:70px; }