The problem stems from specificity of the CSS assignments. The background-position value with a unique ID (e.g a#crw_link) is more specific than the css class name of .active, so it's background position will always override it.
I recommend you create a more universal style for all the navbar items, which also moves the background-position out of the ID css assignment.
nav a {
width:285px;
height:93px;
background-position:0 0;
background-repeat:no-repeat;
}
You can now assign active and hover states to the class assignments.
nav a.active, nav a:hover {
background-position:0 13px;
}
And finally you specify each unique image to the ID assignments like the following:
nav a#crw_link {
background-image:url('http://www.veseys.com/ca/en/images/products/small/10171.jpg');
}
nav a#cww_link {
background-image:url('http://www.veseys.com/ca/en/images/products/small/10170.jpg');
}