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

Question

[timers]

Всем привет.

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

А так же, как сделать выпадающее меню на всю ширину основного блока?
В поиске одно старье...ничего не нашел похожего.

https://codepen.io/Timers/pen/JLrzrj

Answer 1

[tyzberd]

https://codepen.io/anon/pen/OvxqKZ

Comments

[timers]

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

[tyzberd]

обновил.

[tyzberd]

вы смотрите в верстку популярных библиотек, в тот же bootstrap 4 и 3-й версии getbootstrap.com/docs/4.0/components/navs

[timers]

Нет, не то, вот пример:


Т.е. ul выпадающий должен быть на всю ширину меню.

[tyzberd]

обновил

[timers]

tyzberd, Спасибо большое, теперь разобрался!

Answer 2

[Игорь]

.menu{
...
display:flex;
width:100%;
}
.menu>li{
flex-grow:1;
}

Comments

[timers]

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

[Игорь]

timers,
.menu li ul, .menu li ul li{
width:100%;
}