RAX7

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Если на SVG сделать маску внутрь которой засунуть еще SVG, то может чего и получится

В качестве идеи:

https://codepen.io/anon/pen/mgZevB?editors=0100

.dropdown
	&:hover
		> .submenu, > .subsubmenu
			opacity: 1
			visibility: visible

https://codepen.io/anon/pen/XQLbzE

Используй position: fixed;
https://codepen.io/yngve/pen/jERNJv

Верхний бордер сделай через псевдоэлементы before/after

у .nav__item убери паддинг в процентах, он рассчитывается от ширины родителя, а ширина родителя зависит от .nav__item.
https://jsfiddle.net/znt5pbhw/

Сначала нужно сделать изображение для рамки.
Картинка режется вот по такой схеме:

В твоем случае будет типа такого


Получившуюся картинку уже можно будет использовать для border-image