Как растянуть подменю на всю ширину страницы ( но центрировать пунты меню по контейнеру)?

Question

[olya_097]

Как растянуть подменю на всю ширину страницы ( но центрировать пунты меню по контейнеру)?
https://jsfiddle.net/hwdug56t/

Answer 1

[Тигран Абрамян]

Переписал ваш код, вы конструкцию не правильно собрали, вот и не получилось растянуть на всю ширину, стилизуйте.
https://jsfiddle.net/r9abd78p/

Comments

[olya_097]

TAbrahamyan, спасибо
но проблема то появляется , если я добавляю стрелочку
с 12 по 30 строки

ведь по макету он есть( и на моем скрине также)

только выносить отдельно тогда?

https://jsfiddle.net/4uz16vg7/1/

[Тигран Абрамян]

olya_097, Как вариант да можно заносить отдельно в html, а там уже стрелочку создать
https://jsfiddle.net/0jx7u39g/

[olya_097]

TAbrahamyan, а второй уровень меню есть смысл выносить? стрелочку оставить

[Тигран Абрамян]

olya_097, Не знаю, вам решать, лучше делать по макету.

[olya_097]

TAbrahamyan, простите за мою глупость
но почему не растягивается?
вроде ж сделала все как у вас

подменю на всю ширину экрана в макете
https://codepen.io/Olya097/pen/oNXpPqq

[Тигран Абрамян]

olya_097, Все правильно растягивается на всю ширину родителя, уже не могу сказать как растягивать на всю ширину экрана.

Answer 2

[frontend queen]

width: 100% для класса submenu будет брать 100% ширины родителя (li), потому не срабатывает
в этом случае, как вариант, выставлять min-width фиксированную, а там уже подгонять.

Comments

[olya_097]

frontend queen, так может как вариант вообще вынести отдельно подменю?

[frontend queen]

olya_097, вынести можно в случае, если выпадающее меню только для одного пункта
иначе связывать скриптом