Как сделать без адатив без min-width?

Question

[maketosLikes]

только через max-width

https://jsfiddle.net/1sheL0aj/

Comments

[Ankhena]

Во-первых, зачем?

Во-вторых, как обычно, переопределять свойства для нужных селекторов.
Т.е. переписывать nth-child из предыдущего media и переопределять им свойства на изначальные.

Почитайте про revert тогда чтоль.

[maketosLikes]

Ankhena, Во-первых, зачем?
____________
смысла нет? будет плохо?

[Ankhena]

maketosLikes, если вам охота километр кода по 2 раза переписывать, то вперед.
Особенно приятно будет другому человеку, которому попадет проект в руки или вам же, но через полгода.

[maketosLikes]

Ankhena, ок. спасибо
а не подскажете, пожалуйста, как реализовать такое меню?
если не кодом, то на словах (скрины ниже)
тоесть - навожу или кликаем на продукцию - открыватеся подменю с 3 блоками (может быть 5) растягивается

навожу на про компанию - 1 подблок, под ним стает

https://jsfiddle.net/ejLob432/1/

[Ankhena]

maketosLikes, не вижу в вашем коде ни разметки для выпадающего меню ни попыток хоть как-то его сделать.

Собственно и не вижу чем оно отличается от обычного выпадающего меню, которое элементарно гуглится.

[maketosLikes]

Ankhena, вот https://jsfiddle.net/cL7f0yhs/
с про компанией - согласен. Не проблема.
Но если будет 5 подблоков по продукции?

как тут. И каждый первый подчеркнутый.

[Ankhena]

maketosLikes, разбейте задачу на попроще:
Вы можете сделать выпадающий блок? Да.
Вы можете сделать блок (ul) в котором 5 элементов (li с вложенными ul) в строку? Думаю, да.
Теперь объединить одно с другим.

[maketosLikes]

Ankhena, так? но как расположить непонятно
https://jsfiddle.net/18vsrxge/1/

[Ankhena]

maketosLikes, гридами, флексами, css columns - как удобнее, так и сделайте.
Я не понимаю проблемы.
Для main-header__list вы можете задать флекс, а для submenu нет?

[maketosLikes]

Ankhena, но как то криво получается https://jsfiddle.net/2sutzwkd/

[maketosLikes]

Ankhena, не подскажете, пожалуйста?
так нормально? не костыльно?
или подход не верный?
правда если будет не 5 подблоков , а меньше (4, 3 , 2) не важно
то пустое место не заполнится
https://jsfiddle.net/tyfd8cb0/1/

[Ankhena]

maketosLikes, теперь попробуйте перевести мышку со ссылки на пункты выпадашки. hover нужно вешать не на ссылку, а на li

И ещё напишите текст после меню, вряд ли вас устроит такое поведение.

[maketosLikes]

Ankhena, понимаю, но вопрос в другом)

[Ankhena]

maketosLikes, в чем?
Заполнят ли блоки в выпадашке всю ширину?
Ну как напишете так и заполнят.
Изучите подробнее гриды, флексы и css columns. Посмотрите их возможности и задайте такое поведение, которое вам (или дизайнеру с заказчиком) нравится.

[maketosLikes]

Ankhena, так я ж выше показал. Я пытался сделать на гридах (имею ввиду это https://jsfiddle.net/tyfd8cb0/1/)

также на колонках https://jsfiddle.net/kvcow3Lz/

[Ankhena]

maketosLikes, вы можете нормально сформулировать что вы хотите получить и чем это отличается от того, что сейчас?
Желательно с картинками?

А то вы кидаете песочницы. Ну ок, песочница, дальше что?

[maketosLikes]

Ankhena, вроде решил. Вполне адакватный вариант флекс родителю и flex-grow: 1; итемам ?

[Ankhena]

maketosLikes, да, вполне.