Александр

Если вопрос только в том, чтобы тень не нависала над меню, то достаточно поменять z-index у какого-то из родительских блоков этого меню, т.к. именно по этой причине у вас эта ситуация "не лечится z-index'ами".

P.S. Не забудьте добавлять position: relative, чтобы z-index заработал у блоков, где никакого position не было прописано

Сделайте псевдоэлемент. Например:

.element {
position:relative;
}
.element:after {
content:'';
position:absolute;
bottom:0;
left: 0;
right:0;
z-index:1;
background: #ccc; // цвет фона блока
height: 25px; // высота нижнего padding
}

Вместо .lov в вашем scss надо добавить пару символов:
& + .lov

Размер стрелки идет через font-size: 20px.
Вполне возможно, что откуда-то наследуется высота строки. Поставьте у стрелки высоту строки единицу:
line-height: 1

Так если у родителя absolute, ставьте у :before absolute, псевдоэлемент будет позиционироваться относительно родителя все равно ведь.

P.S. Сначала подумал, что просто пропадает при выходе за рамки, думал, что там overflow: hidden у родителя

Вот есть готовый похожий пример, можете поиграться с углами jsfiddle.net/csDP9/9

Фиксация при прокрутке shpargalkablog.ru/2017/04/position-sticky.html

Делать ссылки не точно по слову, а с запасом и с помощью css и media-запросов двигать их в зависимости от разрешения

Можете попробовать выставить шрифт в vw. Например:
font-size:1.5vw;
Только нам нужны будут пределы, а то до минимума так можно уменьшить. И проверьте, насколько это кроссбраузерно