Как добавить скролл подменю, в котором еще одно подменю?

Question

[Dunno2018]

Здравствуйте.
Ссылка на меню
Добавил подменю max-height: 500px и overflow-y: auto.
Просто у подменю работает:

Но если в подменю добавить еще одно подменю:

Помогите, пожалуйста, исправить

Answer 1

[FrelFrloich]

Не понятно, вы хотите убрать нижний скролл? Если да, то position: relative; задаете родительскому меню и absolute дочернему, в последствии выводить его при :hover.

Вообще это плохая практика со скролом, попробуйте вывести полный список ввиде общей плашки с высотой max-content. Пользователь может уже подзабыть первый пункт меню пока мотает до последнего, а это может повлиять на поведенческий фактор.

И еще ваш выпадающий список со скроллом по оси y обвёрнут дивом, вы можете убрать его и задать ul списку псевдоелемент с прозрачностью определённой высоты, таким образом вы уберете дополнительный тег из разметки и избежите "пропадания" этого ul списка при наведении за границу li или в промежуток между li и выдающим ul.

Comments

[Dunno2018]

FrelFrloich, выглядеть должно так, но при этом каждому из подменю добавляться скролл, если высота больше 500px:

[FrelFrloich]

Dunno2018,
max-height: 500px;
overflow-y: auto;

задайте ul списку. при проверке вышло так, если список не достигает 500px скролла нет, при достижении скролл появляется.

[Dunno2018]

FrelFrloich, с псевдоелементом понял, спасибо за валидное решение. А max-content не очень понимаю как поможет. Скролл используется, потому что очень много пунктов в подменю, а родительское меню планируется еще и быть фиксированным. В таком случае подменю вообще скрывается за экран и последние пункты недоступны.
Сейчас через js сделаю, благодарю

[FrelFrloich]

Dunno2018, ну смотрите, ваши li определённой высоты, при этом если ваш список достигает 500px то появляется скролл если он меньше, допусти 4 li по 50px это всего 200px и не появится скролл, но при это сам контейнер ul Будет тоже 200px, а вот если вы добавите 11 пунктов li то это будет 550px и по этоу сам ul превысит 500px и появится возможность скроллить, 500px вы сами обусловили, можете любое задать.

В общем я непонятно описываю, js тут не нужен всего 2 строчки css(( Просто попробуйте, там вообще ничего нет проблемного, у меня трабла с четким объяснением.

Про макс контент, я имел ввиду меню довольно распространнёное на пол экрана или на весь, тогда я еще не допонял вашу проблему, вот и вышло так. Извините.