Доработать меню ul li, как сделать автоматическое вытягивание во всю длину блока все li?

Question

[Антон Вебсайтовский]

Всем привет, подобное не делал.

Есть обычное меню на li, как все элементы ли вытянуть во всю длину блока? чтоб они были адаптивные вытягивались во всю длину.
Как-то на флекс можно, но пока не допетрил.

Второй вопрос, идет закругление фона сверху, при ховер у первого элемента надо сделать чтобы верх закруглялся, я пытался но чет не вышло.

Добавил там стиль для первого элемента li

ul.dropdown li:first-child{
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
}

Осталось тоб hover задействовался для первого элемента, а то он все равно квадрат делает.

Рабочий пример:
https://jsfiddle.net/4kdx5e0o/3/

Comments

[Ankhena]

У флексов свойств меньше десятка, неужели за столько лет не прочитать про каждое из них...
justify-content: space-between распределит дочерние элементы по всей длине главной оси.
flex-grow:1 распределит все свободное пространство среди элементов в одинаковых пропорциях (не элементы будут одинакового размера, а распределение свободного пространства).

Второй вопрос, идет закругление фона сверху, при ховер у первого элемента надо сделать чтобы верх закруглялся, я пытался но чет не вышло.

Ну конечно, вы же закругляете li, а фон задаете ссылке. Либо overflow либо закругляйте ссылку.

[Антон Вебсайтовский]

Ankhena, каюсь, я все не запоминаю свойства, флекс использую около года.
Решил старое меню обновить, на флексе сделать.

Ну вообще вышло что надо )/
https://jsfiddle.net/b74mc8y2/2/

Если применить overflow, с закругляхами да все ок, но есть но ) подменю не выводит )

[Ankhena]

Антон Вебсайтовский, неожиданно, но я рада :)

Если применить overflow, с закругляхами да все ок, но есть но ) подменю не выводит )

Значит, выберите тот способ который подходит в вашем случае.

[Антон Вебсайтовский]

Ankhena, Я как-то делал, но пока не выходит, не помню как )

Во вспомнил) работает ) первый и последний элемент где закругления есть )

.nav ul li:first-child:hover a {
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
}
.nav ul li:last-child:hover a {
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}

[Антон Вебсайтовский]

Ankhena, скажи какие шрифты для сайта используешь, какие лучше всего во всех браузерах отображаются. Open Sans ? и подобные?

[Ankhena]

Антон Вебсайтовский,

-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;

Угу, только префиксы для border-radius лишние и уже давно.
Ручками их вообще лучше не писать, для этого есть автопрефиксер в сборщиках. Либо в конце верстки ручками, но все равно через него https://autoprefixer.github.io/ru/

[Ankhena]

Антон Вебсайтовский,

скажи какие шрифты для сайта используешь, какие лучше всего во всех браузерах отображаются. Open Sans ? и подобные?

Любые, выбранные дизайнером.

Сама люблю Fira Sans, Lato, Noto Sans, Oswald, Open Sans , Roboto
И по настроению :)