Problem with .current and image-menu

When I create a menu, there is autmatically a div created with the specific name “#menu-“name””. In this menu I’m using images with a hover and I want to use the current class. So, I’ve given each menu-item its own class, so I can point the correct image as a background. So far so good. But the problem is there with the current class. When I apply the current class to the created div “#menu-“name””, its working. But when I add the specific class for the menu-item, each item has his own inage, then it doen’t work anymore. It falls back to the default image.
I’m using a build in menu from wordpress.

Does anyone know how to achieve this?

My test-site is on https://bit.ly/WMAuQc

The used code is

#menu-collega li {
	width:360px;
	list-style:none;
	margin-left:-15px;
	position:relative;
	z-index:20;
	text-indent:-999em;
 	overflow:hidden;
}

#menu-collega .coll1 a, #menu-collega .coll2 a {
	display: block;
	width:338px;
	height:113px;
	position:relative;
	z-index:20;
}

#menu-collega .coll1 a {background: url('images/colmenu/jk-zw.png');}
#menu-collega .coll1 a:hover {background: url('images/colmenu/jk-c.png');}

#menu-collega .coll2 a {background: url('images/colmenu/nd-zw.png');}
#menu-collega .coll2 a:hover {background: url('images/colmenu/nd-c.png');}

#menu-collega .coll1  .current_page_item > a,
#menu-collega .coll1  .current_page_ancestor > a,
#menu-collega .coll1  .current-menu-ancestor > a,
#menu-collega .coll1  .current-menu-item > a,
#menu-collega .coll1  .current-menu-parent > a {
	background: url('images/colmenu/jk-c.png');
}

* html #menu-collega .coll1 .current_page_item a,
* html #menu-collega .coll1 .current_page_ancestor a,
* html #menu-collega .coll1 .current-menu-ancestor a,
* html #menu-collega .coll1 .current-menu-item a,
* html #menu-collega .coll1 .current-menu-parent a,
* html #menu-collega .coll1  a:hover {
	background: url('images/colmenu/jk-c.png');
}

I would really appreciate some help….