Как поправить трехуровневое выпадающее меню?

Question

[Лариса]

Есть трехуровневое меню
Требуется сделать меню второго уровня в две колонки

Страница на сайте ниже как выглядит


при добавлении в меню второго уровня
column-count: 2
разваливается меню третьего уровня
Сылка на страницу, где меню второго и третьего уро...


Если сместить меню третьего уровня левее, то мы видим что оно накрывается второй половиной разбитого меню второго уровня


Решение необходимо в рамках существующей верстки, переделывать все с использованием flex не вариант

Comments

[sim3x]

Загрузите картинки на хабрасторадж

[Hyubert]

при добавлении в меню второго уровня
column-count: 2
разваливается меню третьего уровня

ну так правилньо, нужно ж еще и позиционирование поправить.

[Лариса]

Hyubert, часть меню третьего уровня накрывается сверху второй половиной колонки
позиционирование на месте, так как сиреневая полоска начала и сиреневый треугольник видны

[Hyubert]

Лариса, уберите с .products-menu__item
position: relative;

[Лариса]

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

[Лариса]

Hyubert, в этом случае все меню третьего уровня выводится только по правому краю, вместо того чтобы быть рядом со своим пунктом (рыба)

[Hyubert]

Лариса, ну если вам так нужно, то проблема только с перекритием, добавте враперу 3 уровня
z-index

[Лариса]

Hyubert,
блок третьего уровня разваливается

Answer 1

[StrikeBack]

Попробуйте вместо column-count
поставить для класса .products-menu__item {width: 50%; float: left;}