Hover color top level not working

Hello. For our website i’m trying to create a different hover color. We use the following code. I want to create a hover color for all top level names.

$font-family: 'benton-sans-condensed', sans-serif;

$color-marineblauw: #005198;
$color-groenblauw: #029CA3;
$color-koraalrood: #FC7B69;
$color-geel: #e09800;

$demo-btn-fg-color: #fff;
$demo-btn-bg-color: $color-groenblauw;

$grid-width: 1140px;

/** Push menu onto new line **/ 
#{$wrap} { 
    clear: both; 
}

#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link,
#{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
	font-family: $font-family;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.5px;
}

@include desktop {
	#{$wrap} #{$menu} li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
		display: none;
	}	
}

@include desktop {
    #{$wrap} #{$menu} > li.mega-menu-item.mega-menu-item-demo > a.mega-menu-link {
        height: auto;
        line-height: 1;
        padding: 12px;
        border-radius: 4px;
        background-color: $demo-btn-bg-color;
        color: $demo-btn-fg-color;
        transition: all .1s ease-in-out;
        border: 2px solid $demo-btn-bg-color;
    }
    #{$wrap} #{$menu} > li.mega-menu-item.mega-menu-item-demo > a.mega-menu-link:hover {
        background-color: $demo-btn-fg-color;
        color: $demo-btn-bg-color;
    }
}

#{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item.mega-bdbc-marineblauw > a.mega-menu-link {
	color: $color-marineblauw;
	border-bottom-color: $color-marineblauw;
}
#{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item.mega-bdbc-groenblauw > a.mega-menu-link {
	color: $color-groenblauw;
	border-bottom-color: $color-groenblauw;
}
#{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item.mega-bdbc-koraalrood > a.mega-menu-link {
	color: $color-koraalrood;
	border-bottom-color: $color-koraalrood;
}
#{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item.mega-bdbc-geel > a.mega-menu-link {
	color: $color-geel;
	border-bottom-color: $color-geel;
}

@include desktop {
	#{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu {
		padding-left: calc((100% - #{$grid-width}) / 2);
		padding-right: calc((100% - #{$grid-width}) / 2);
	}
}