Реально ли сверстать такое меню?

Question

[Vladimir Prosvirin]

Нужно сверстать такое меню.

Суть в том что нужно учесть следующее:
1. Количество пунктов меню не фиксированное
2. Все пункты меню должны быть одной ширины
3. Пункты меню должны занимать всю ширину родителя (т.е. если их 5 то ширина 1/5 и т.д)
4. Отступ в выпадающем меню слева, должен быть равен отступу слева у основного пункта (см. скрин)

Вопрос реально ли сделать такое? Если да, то как (можно в двух словах).

Answer 1

[Рома Зварич]

Все пункты меню должны быть одной ширины

Отступ в выпадающем меню слева, должен быть равен отступу слева у основного пункта (см. скрин)

С этим сложности, так как один пункт немного противоречит другому.
Если ширина у всех одинаковая, значит отступы разные.
И чтобы сделать у выпадающего списка отступы как у главного меню, нужно наверное через JS высчитывать.
А в остальном, как-то так получается.

https://codepen.io/hisbvdis/pen/GVPxap

Comments

[Рома Зварич]

Xdevelx, да, согласен. Убрал

Answer 2

[Lord_Dantes]

Родителю задаете нужную ширину + display: flex; align-items: center; justify-content: center; , пунктам меню задаете 100 процентную ширину. На первый выпадающий делаете абсолютом у первого пункта и ему просто задаете фикс ширину и padding ну и все что.