NAV STYLES: Problem with Active State in Drop-Down Navigation Folder Items

Updating on 7.1 at https://www.wholesystemsdesign.com/

I am trying to emulate the navigation styles (colors) we had on our 7.0 site shown below. As an example this represents the ACTIVE STATE (yellow) of the nav link(s) if a user is on the "apprenticeship" page if you were to hover on "courses":

The default upon 7.1 upgrade was everything white with underlines.

I was able to get close with the following CSS:

/* HEADER NAV STYLES */
.header-nav-item--active a {
    background: none !important;
  	text-decoration: none !important;
	color: hsl(46, 60%, 60%) !important;
}
.header-nav-item a:hover {
    color: hsl(46, 60%, 60%) !important;
	transition: all 0.3s ease;
}
.header-nav-folder-content{
  background-color:hsl(114, 6%, 59%)!important
}
/* END HEADER NAV STYLES */

Which results in this appearance when a user is on the "apprenticeship" page:

As you can see, all links under "courses" are shown as active state, and the underline is forced back in.

What am I missing?

Change this line

.header-nav-item a:hover {
    color: hsl(46, 60%, 60%) !important;
	transition: all 0.3s ease;
}

to this

.header-nav-item>a:hover {
    color: hsl(46, 60%, 60%) !important;
	transition: all 0.3s ease;
}

Brilliant! I had a similar issue (not on hover) and this helped!