Юрий Уваров

flex в ie11 работает только с явно заданными величинами.
Гуглите flex ie11 height 0

https://jsfiddle.net/av17zej3/
заменить:
.menu menu:hover nav { display:block; }
на
.menu menu a:hover+nav { display:block; }

Вы задали z-index для .header .catalog-menu .catalog-menu__item ul li a
z-index: 2, но у родителя .header .catalog-menu .catalog-menu__item
стоит z-index: 4, это называется наследование, если у родителя большой z-index то на вложенные элементы он так же распространяется.

margin-top: 1px;
margin-left: 1px;
Нужно смотреть что с ними происходит при hover
Лучше вообще не использовать margin с флексами, по крайней мере тут, как альтернатива: border-left: 1px solid #fff; border-top: 1px solid #fff;

position: fixed; для меню
У вас шапка находится в общем контейнере с id="fullpage" конечно не будет работать. Шапку вытащите из id="fullpage"

Через JS невозможно обратится к псевдоэлементам.
Пользуйтесь поиском. Как обратиться к псевдоэлемунту after через js?

Как вариант, абсолютно отпозиционировать к низу блока и сделать нижний паддинг чтобы текст не залазил на "read more"