Highlight active menu item

Hi,
I have styled my CSS in a way, that when a menu item from the nav bar is selected, its font is showing in a different color (blue: #5675b9).
However, when I click on a subpage from a main menu item, the menu item under which it is linked does not show in blue.
Here’s a example:
When I click on https://www.cancerwithhope.com/resources, the menu item’s text “Resources” is showing up in blue, whereas the other menu items remain white.
However, when I click on a subpage link of ‘Resources’, e.g. https://www.cancerwithhope.com/resources/cancer-centers, the menu item’s text “Resources” is still showing in white, even though I would like it to show in blue.
How can I change this?
This is my current CSS:

/*NAVIGATION BAR*/
/*Navigation bar background full width*/
.main-navigation {
	background-color: #97bc3f;
}

/*Navigation bar font size*/
#site-navigation a {
	font-size: 24px;
}

/*Unordered list styles to body don't affect navigation bar style*/
#site-navigation ul li{
  padding: 0px;
}

/*Search bar*/
.main-navigation .navigation-search input[type="search"], 
.main-navigation .navigation-search input[type="search"]:active {
	color: #FFFFFF;
	background-color: #5675b9;
}

/*Font color of unselected menu items*/
.main-navigation .main-nav ul li a, 
.main-navigation .menu-toggle {
	color: #fff;
}

/*Menu items hover*/
.main-navigation .main-nav ul li:hover > a, 
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.sfHover > a {
	color: #5675b9;
	background-color: #97bc3f;
}

/*Chosen menu item*/
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: #5675b9;
	background-color: #97bc3f;
}

/*Chosen menu item hover*/
.main-navigation .main-nav ul li:hover[class*="current-menu-"] > a {
	color: #5675b9;
	background-color: #97bc3f;
}

I guess I made a mistake somewhere in there, but just can’t figure it out.

Thanks for your help,
Michaela

The page I need help with: [log in to see the link]