Почему появляется горизонтальный скролл?

Question

[r_g_b_a]

Два вопроса:
1) Почему когда я задаю overflow-y: auto появляется горизонтальный скролл, ведь это свойство предназначено для управления вертикальным?
2) Я хочу сделать обычное выпадающее подменю (второй вариант по ссылке ниже). Единственное условие - нужно ограничить максимальную высоту для основного меню, и отдельно для подменю. Это возможно сделать только на css?
https://jsfiddle.net/uj8o2y5f/1/

P.S. Внезапно обнаружил, что пару часов назад задали аналогичный вопрос Как добавить скролл подменю, в котором еще одно подменю?. Там более понятный пример меню.

Answer 1

[FrelFrloich]

ul ul
position: absolute;
уберите, это по первому варианту.

с ограничением высоты
max-height: 300px;
overflow-y: auto;
при достижении 300px появится скролл, вы все делали верно.

Comments

[r_g_b_a]

ul ul
position: absolute;
уберите, это по первому варианту.

Если я уберу позиционирование второго меню, то элемент начнет резервировать место внутри первого.

[FrelFrloich]

r_g_b_a, вы хотите, контейнер в котором два блока, и исходя из высоты любого блока появлялся скролл? Очень сложно понять что вы хотите))

[r_g_b_a]

FrelFrloich, типа того. Смотрите, сделал еще пример https://jsfiddle.net/v2zcnh8s/
Типичное выпадающее меню. Наводим на "Категории", снизу выпадает красное меню. Наводим на его первую ссылку - справа выпадает синее подменю.
Сделал их постоянно видимыми для удобства.
Единственное что требуется, ограничить высоту красного и синего блоков, потому что в них может быть большое количество ссылок, и эта простыня тянется на несколько экранов. Если я добавляю хотя бы красному блоку max-height: 100px; overflow-y: auto - дизайн ломается и появляется горизонтальный скрол.

[FrelFrloich]

r_g_b_a, понял, вас. https://jsfiddle.net/71yv592e/26/ попробуйте поэкспериментировать в этом направлении, обвернув сам ul root контейнером, я понимаю что не решение, но может вас наведет на мысль.

[r_g_b_a]

FrelFrloich, увы, но нужен отдельный скрол для каждого из меню, а не общий для контейнера. Но спасибо за участие.
Видимо придется выносить второе меню за пределы первого и позиционировать его с помощью js.

[FrelFrloich]

r_g_b_a, да вы правы, я даже перекурил и не могу понять возможно ли вообще вынести за границу второй список без отсутствия скорлла. Видимо нет. Спасибо вам, вы мне подарили занятия на часа 2). Если решу проблему отпишу.

[FrelFrloich]

r_g_b_a, всё же вот вариант без js до которого я додумался наведите на 1 итем https://jsfiddle.net/3noqhLz4/7/. Вам такой хоть и не нравится, но мне кажеться вполне актуальный если побаловаться с z-index для nav. У меня вопрос, а вы уверены что пользователь будет тыкать в li именно тот который по центру, а если в нижний тогда он не увидит меню вовсе.

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