Как решить проблему с overflow?

Пример кода

Пилю многоуровневую менюшку. При переходе во внутренний уровень происходит смещение с помощью transform (см. пример, меняем значение level - двигаем меню на нужный уровень).

Проблема возникла следующая. Поскольку все ul кроме первого у нас имеют абсолютное позиционирование, то высота nav блока у нас формируется исходя из высоты нашего первого ul. Отсюда возникает проблема выхода за рамки нашего nav блока в случае если высота абсолютного ul блока превышает высоту первого.

Думал решить проблему через overflow. Прописываю всем ul высоту 100% чтобы она занимала высоту nav блока и соответственно прописываю всем ul значение overflow-y: auto чтобы каждый элемент списка скрывал контент по вертикали под скроллом, но не сработало... Скрылось все что по горизонтали. Окей прописываю overflow-x: visible, не сработало... Тупик.

Есть не очень красивое решение, дать overflow-y: auto для nav блока. В целом работает, но высота скролла рассчитывается из самого высокого блока, что не совсем красиво смотрится когда у нас блок с меньшей высотой и скролл прокручивает в пустоту.

Возможно у вас найдется какое нибудь изящное решение данной проблемы?
  • Вопрос задан
  • 393 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы