Ярослав Зозуля

А у тебя нет ни одного правила что б оно открывалось.
Нужно чёт типа
.menu li:hover .submenu {}

а вообще что б не вырисовывать вот такие макаронины, а не селекторы, развесьте классы.
что было типа
.menu-item:hover .submenu {
display: block

}

Приветствую. Писать код не буду что б сами разобрались и вникли.
что ж вам нужно?
слушатель на какое-то событие (к примеру click)
считывать и проверять значение input'a value.
при выполнение какого-то условия добавлять нужный класс через метод .classList.add()

Можно флексом.
flex-basis calc(100%/4 - margin)

и пхай туда сколько хочешь элементов всегда будет адекватно.

а можно ссылку на проект? А то будем тут пальцем в небо тыкать.
как вариант дать секции с постом margin-bottom
да и в целом. в чем проблема дать отступ этой полосе...