Как заставить меню UL сидеть рядом друг с другом?

Question

Пожалуйста, посмотрите, что я хочу сделать: codepen.io/samiralley/pen/xvFdc

Как я могу получить раскрывающийся список навигационной панели в столбцах?

Наведите указатель мыши на «Жесткий»Товары »вы увидите много разделов, например« Шкатулки для пепла »и« Изделия из дерева ».Я хочу, чтобы каждый раздел сидел рядом друг с другом, и когда он достигнет 5 подряд, чтобы перейти к новому ряду.

Я понимаю, что ширина будет устанавливать его на 20%, что позволит 5 сделать100%.

По какой-то причине я не могу заставить его работать.

Существует множество классов CSS, поэтому я подумал, что будет проще использовать элемент проверки Chrome?

Спасибо,

Дэнни

Answer 1

Это не совсем то, что вы просили, но довольно похоже.Это показывает количество меню на основе доступного пространства (высота и ширина) с переполнением.Попробуйте заменить следующий класс следующим образом (убедитесь, что все правила будут применены, при необходимости добавьте !important).Может быть, это не то, что вы хотите, но может быть отправной точкой.

.site-nav--has-grandchildren {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    position: fixed;
    max-width: 90%;
    max-height: 80%;
    overflow: auto;
    min-width: unset;
}