Вертикальное меню с подменю, 2-3-4-5 уровень на 2 уровне, как сделать перенос блоков?

Question

[Антон Вебсайтовский]

Здравствуйте, дорабатываю вертикальное многоуровневое меню, когда наводим на категорию выводиться список подкатегорий на 2 уровне, мы видим 3-4-5-6, типа как на сайте днса, есть проблема, видно на скрине что подменю ушло за фон, надо чтобы оно переносилось на вторую строку.
Желательно целиком, чтобы не обрезалось, полностью категория с подкатегориями.

Рабочее меню
https://jsfiddle.net/63yxg24z/

Answer 1

[Евгений Вольф]

Клац

Comments

[Антон Вебсайтовский]

Спасибо.

Добавили это
.grid-container3 > ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 400px;
}

и

.grid-container3 ul {
display: inline-block;
width: 250px;
}

а что еще? чет смотрю и понять не могу.

[Евгений Вольф]

Антон Вебсайтовский: я вроде бы только вот это добавлял:

.grid-container3 > ul {
  display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 400px;
}

[Антон Вебсайтовский]

Ага, получилось c2n.me/3KNmuMM
только вот там пробелы. распределение не совсем красивое, что с этим сделать можно.

[Евгений Вольф]

Первое что приходит в голову - сортировать меню (на уровне сервера, при его генерации) таким образом что бы "длинные" пункты были в конце.

[Антон Вебсайтовский]

Евгений Вольф: я тож об этом думаю, что надо позиции менять.

flex-direction: column;
flex-wrap: wrap;

работает вроде только в новых браузерах.

[Антон Вебсайтовский]

проверил уже, через позиции тож выходит херня.

[Антон Вебсайтовский]

а если подключить для подкатегорий https://masonry.desandro.com/ ???

[Евгений Вольф]

Антон Вебсайтовский: можно попробовать, но не уверен что это оптимальное решение.

[Антон Вебсайтовский]

Евгений Вольф: щас берда выходит, так как одно менб выше, другое ниже.а масони по идее может распределять.

[Антон Вебсайтовский]

Евгений Вольф: решил оставить так, https://jsfiddle.net/63yxg24z/5/ чуть подшаманил.
нужна помощь, с фоном есть проблема, я там сделал где не 2 строки если чтобы
min-width: 0px;
max-width: 889px;
уменьшалась.
а если 2-3 то чтобы растягивалась. все ок, кроме баграунда белого.

c2n.me/3KQUYFh