Раскрывающийся список многоуровневых с проблемой полосы прокрутки

Question

Поскольку у меня очень длинный список меню, я хочу ограничить их scroll .

В этой демонстрации codepen , она работает без прокрутки.

Но если я добавлю overflow-y:scroll; height:200px;, это вызовет overflow-x и скроет все выпадающие списки, как показано на скриншоте ниже.

Я нашел эту интеллектуальное меню библиотека, которая выполняет эту работу.

Но мой вопрос - как я могу добиться этого без библиотеки?

Answer 1

Это может быть невозможно только с помощью CSS.

Что вам действительно нужно, так это JavaScript.Потому что без него вы просто устанавливаете видимость внутренних списков на visibility: hidden, а элементы с видимостью, установленной на скрытый, учитываются при создании макета div или страницы.Это причина переполнения в направлении х.

С помощью всего лишь CSS вы должны будете установить постоянную ширину основного списка, которая может вместить внутренние списки.

Ниже приведен CSSчто я пробовал и работает с фиксированной шириной.Поместите это вместо CSS, который вы добавляете.Поэтому вместо этого:

li.dropdown ul {
  overflow-y: scroll;
  height: 300px;
}

Добавьте это:

li.dropdown ul {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 300px;
  width: 450px;
}

li {
   width: 100px;
}