Change link color on hover issue

Hello! 

I'm a "code scavenger" and I was able to style the menu to my linking. One issue:

My main menu links change color on hover ONLY for the link without a drop-down menu. The links with a dropdown just show the dropdown, but remain the same color. 

Have not been able to figure out how to get ALL links to change. 

Here's all the code I am using right now, I wonder if there is a conflict here I'm unable to see? PS: Site is barebones, just starting on this.

Many thanks!
 

/* HEADER LINKS */
.header-nav-item a:hover {
    color:#434D4C !important;
}
.header-nav-item a:active {
    color:#000004 !important;
}

.header-nav-item a:active {
    color:#000004 !important;
    background-image: none !important;
}

/*DROPDOWN STYLES */
.header-nav-folder-content {border-bottom:4px solid #C7DDDD}
.header-nav-folder-content {border-top:4px solid #C7DDDD}

/* NAV FOLDER STYLES
removes clickable main dropdown link and underline*/
.header-nav-folder-title {
  pointer-events: none;
}
.header-nav-item--active a {
  background-image: none !important;
  color:#4A7474 !important;
}
.header-nav-folder-content {
  min-width: 90px !important;
}
 

@undefined Try removing the following from your code

.header-nav-folder-title {
  pointer-events: none;
}

If it still doesn't work, please share the URL of your site.

Hey Lesum, thanks so much! Yes — it does the job of bringing back the color overlay but now of course it is returning that top-tier menu option to being a link, which it is not. Is there a way to do both: not have it be a clickable pointer event, but change the color once the dropdown is activated? 

https://owl-sepia-z53p.squarespace.com/

Thank you!

Amazing, totally works and I love the context-menu cursor! THANK YOU!