Как сделать грамотно сделать header?

Question

[War4]

Вообщем, верстаю макет , сверстал header с фоном и в принципе выглядит все красиво.
Он слова :
Отзывы
Предложение
Цены
Оставить отзыв

Свойство hover при наведений не срабатывает как нужно, немного отведешь мышку - работает. Да и копирование текста странное.

https://codepen.io/dusiv_2004/pen/OJOdKOQ

Comments

[ForSureN1]

Песочницу может все таки?

[Павел migelonio]

чего?

[War4]

ForSureN1, jsfiddle.net не работает

[ForSureN1]

Sergey_Dultsev, так jsfiddle не единственная песочница

[Alexey Levicky]

align-items: right;
У свойства align-items нет такого значения как right.
Что бы понять в чем проблема Вам стоит почитать про флекс элементы подробнее, как себя ведут дочерние элементы флекс родителя, и чем отличается align-items: center от align-items: stretch

[War4]

ForSureN1, посоветуйте пожалуйста

[War4]

Aleksey Levickyj, хорошо я почитаю

[ForSureN1]

Sergey_Dultsev, codepen

[War4]

ForSureN1, можете посмотреть

[ForSureN1]

Sergey_Dultsev, а с какой целью вы для списка меню сделали минусовый margin ?

[War4]

ForSureN1, чтобы навигацию была с называнием на одной линии

[Антон Романков]

Обратите внимание на то, как сделана верстка. Добавил скрин, чтобы продемонстрировать, как ведут себя элементы. Красная обводка — это ul, черная — li.



Набросал, как это может быть: https://codepen.io/romant094/pen/ZEagLWz

[Antony Bark]

Антон Романков, это решение, напишите отдельным ответом, а не комментарием. Не все заглядывают в них

[Антон Романков]

Antony Bark, готово :-)

[Antony Bark]

Sergey_Dultsev, привет! Рассмотрите решение Антон Романков

Answer 1

[Антон Романков]

Обратите внимание на то, как сделана верстка. Добавил скрин, чтобы продемонстрировать, как ведут себя элементы. Красная обводка — это ul, черная — li.



Набросал, как это может быть: https://codepen.io/romant094/pen/ZEagLWz