Как реализовать такое меню?

Question

[ItsCoder]

Как реализовать меню такого типа?


Само меню должно быть в контейнере с border.
Проблема в том, что если последнему уровню меню задать position: absolute, то родительский контейнер не будет иметь динамическую высоту и меняться в зависимости от количества пунктов меню.

Какие еще есть решения?

Answer 1

[Eugene Chefranov]

Попробуйте последнему меню дать не absolute, а relative

Comments

[ItsCoder]

Тогда как его позиционировать?

[Максим]

Если задать ему relative, то он будет родителя двигать

[ItsCoder]

Максим, вот и я об этом :)

[Eugene Chefranov]

ItsCoder, можно добавить немного JS https://codepen.io/chefranov/pen/mXXMRZ

Answer 2

[Максим]

Я вот так набросал:
https://codepen.io/Melagomania/pen/MQQvgb?editors=0100
Конечно решение костыльное и абсолютно не универсальное, ведь количество элементов подменю может быть разным. Тем не менее, возможно, в каком-то конкретном случает и такой способ сойдет, если не предусматривается добавление/удаление подпунктов, подменю. Еще можно при наведении на разные пункты меню задать внизу разные маргины, чтоб высота "подстраивалась".

Comments

[ItsCoder]

К сожалению, это совсем не решение