Как тут сделать меню hover во всю ширину div?

Question

[dhat]

Пытаюсь сделать меню под адаптивный дизайн. Брейкпоинт на 720px (когда фон меню становится зеленым) - как там сделать hover при наведении на ссылку меню белым во всю ширину этого зеленого div? Ума не приложу, что только не перепробывал уже. Как сделать этот ховер в ширину дива .main-menu? Там ширина указана 50vw - может из-за этой величины конфликт идет?

codepen.io/dhatt/pen/BzEZRN

Answer 1

[Андрей Верх]

.main-menu li {width:100%;padding:0;flex:1 1 100%;}
.menu-links {padding:10px 0;text-align:center;display:block;}

Comments

[dhat]

Спасибо вам добрейший человек!

[dhat]

К сожалению, обнаружил косяк в Фаерфоксе - зеленый див отступает от верха на расстояние равное высоте самого верхнего дива .centered. В Хроме все работает нормально. Префиксы добавил везде. Не пойму где проблема опять?

[Андрей Верх]

dhat: У меня в FF всё ок.
Попробуйте сбросить флекс - ul {display:block} т.к. он уже не нужен. Ну или ul {align-content:flex-start}

[dhat]

Не помогает :( У вас точно в ФФ все нормально? Я код обновил в кодепене, посмотрите сейчас если не трудно. У меня в кодепене тоже эта проблема видна, если я его открываю в ФФ.

[dhat]

Ох, кажется я исправил сам - top: 0 добавил. Ну что ж, CSS не такой страшный, если заставить себя ручками поработать))

[Андрей Верх]

Не очень тогда понимаю о чём конкретно вы. Может о том что у вас у меню стоит fixed? Тогда замените на .main-menu {position:relative}

[dhat]

Андрей Верх: position:relative не сделает зеленое меню на всю страницу!

[Андрей Верх]

dhat: Так задайте ширину. Я не знаю какое именно поведение вам нужно...Может и для fixed отступ верхний достаточно вам изменить.

[dhat]

Андрей Верх: не-не, ширина нормальная. По высоте это меню зеленое становится не на всю страницу, если использовать position:relative. В любом случае, я этот косяк с ФФ решил top: 0; спасибо Вам за первоначальное решение!