Решил вопрос с помощью filter
Менять конкретные части SVG на данный момент вроде как нельзя, только общую цветовую гамму с помощью фильтров
Вдруг кому пригодится
header и footer обычно имеют четкий height
В таком случае для main задать min-height: calc(100vh - 200px); // где 200px это высота header + высота footer
Я предпочитаю для кроссбраузерности добавлять перед этим min-height: 100%; min-height: calc(100% - 200px);
И не забудьте прописать html, body {min-height: 100%;}
Проблема в том что вы добавляете span в body, а не li
Также span появляется строго под курсором
Следовательно у li теряется hover и менюшка закрывается
Есть два пути решения:
1) Добавлять span не в body, а в li
2) Устанавливать таймер который будет искуственно удерживать hover для li
