1. How doe I remove the white box when I hover on the link in the submenu under about

2. Is it possible to change the background color and opacity on the submenu as you scroll same as you would with the main nav bar?

Thank you

I did that. It does not change the hove link background to transparent. I need the CSS code.

For example:

header#top .sf-menu li ul li a {
    background-color: #ff0 !important;
}

Changes the link background to yellow. I want to remove the blue background when I haver the dropdown link. But, the following code does not work (even if I designate a color).

header#top .sf-menu li ul li a:hover {
    background-color: none!important;
}

I solved it after digging through the archives.

#header-outer:not([data-format="left-header"]) #top nav >ul >li:not(.megamenu) ul a:hover{background-color:unset !important;}

html body div#header-outer[data-transparent-header="true"] #top nav >ul >li:not(.megamenu) ul {
    background-color: rgba(0, 0, 0, .8)!important;
}

Thank you

OK. I have all the CSS working as I like but I now do not have the link changing colors on hover to #f8d708

#header-outer:not([data-format="left-header"]) #top nav >ul >li:not(.megamenu) ul a:link {background-color:unset !important;
color:#ffffff !important;}

html body div#header-outer[data-transparent-header="true"] #top nav >ul >li:not(.megamenu) ul {
    background-color: rgba(0, 0, 0, .8)!important;
}

body #header-outer[data-transparent-header="true"].transparent #top nav >ul >li:not(.megamenu) ul {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

Correct. But when I customize the dropdown menu to remove the hover color background and to implement that it change color on scroll, somehow the hover link color has been disabled. I just figured it out though. Had to change CSS to remove link color:

#header-outer:not([data-format="left-header"]) #top nav >ul >li:not(.megamenu) ul a:link {background-color:unset !important;}

Thank you!