Menu as "active" for subpages

I am trying to make a child theme from twenty fourteen.
On the page I have used the menu-funktion and build a specific menu with parent pages and subpages to these parents.

I will then have the style to show the parent pags menu-ikon showed as “active”/”hover” when browsing subpages.

I thought I have to use the .current_page_ancestor but i can’t get i to work 🙁

.site-navigation li.kole a{
	background-color: rgba(0, 149, 208, 1);
}

.site-navigation li.vent a {
	background-color: rgba(0, 144, 76, 1);
}

.site-navigation li.ener a{
	background-color: rgba(245, 208, 16, 1);
}

.site-navigation li.kole a:hover, .site-navigation li.kole a:active {
	background-color: rgba(0, 149, 208, 0.6);
	height: 80px;
	color: #000;
}

.site-navigation li.vent a:hover, .site-navigation li.vent a:active
   {
	background-color: rgba(0, 144, 76, 0.6);
	height: 80px;
	color: #000;
}

.site-navigation li.ener a:hover, .site-navigation li.ener a:active {
	background-color: rgba(245, 208, 16, 0.6);
	height: 80px;
	color: #000;
}

could some on please help me?