menu item active

Ik heb onderstaande css code. Wat hier gebeurt is dat elk menu item een plaatje is. Alle img's hebben een hoogte van 72px. Standaard wordt het menu 37px hoog. Precies de helft dus. Als iemand dan over een link gaat wordt de onderkant van de img getoont door -37px te doen bij A:hover. Alleen wat ik nu eigenlijk nog wil is dat als een menu item active is, er is dus op geklikt dat dan de onderkant van de afbeelding zichtbaar blijft. Nu is het zo dat alleen bij rollover de onderkant wordt getoond dus als je er op klikt zie je weer de bovenkant. Hoop dat het een beetje duidelijk is wat ik bedoel. Hieronder de css waarmee dit allemaal gebeurt en een link naar een voorbeeld van zo'n img.

#navigation {
	margin: 0;
	padding: 0;
	padding-left:15px;
}
#navigation li {
	list-style: none;
	height: 37px;
	float: left;
	position: relative;
}
#navigation li a {
	height: 37px;
	display: block;
}
a#news { width: 42px; height: 37px; }
a#register { width: 54px; height: 37px; }
a#destination { width: 71px; height: 37px; }
a#travel { width: 43px; height: 37px; }
a#agenda { width: 52px; height: 37px; }
a#partners { width: 57px; height: 37px; }
a#staff { width: 38px; height: 37px; }
a#awards { width: 52px; height: 37px; }
a#faq { width: 31px; height: 37px; }
a#contact { width: 53px; height: 37px; }
a#pictures { width: 58px; height: 37px; }
a#news { background-image: url(../img/menu_02.jpg); }
a#register { background-image: url(../img/menu_03.jpg); }
a#destination { background-image: url(../img/menu_04.jpg); }
a#travel { background-image: url(../img/menu_05.jpg); }
a#agenda { background-image: url(../img/menu_06.jpg); }
a#partners { background-image: url(../img/menu_07.jpg); }
a#staff { background-image: url(../img/menu_08.jpg); }
a#awards { background-image: url(../img/menu_09.jpg); }
a#faq { background-image: url(../img/menu_10.jpg); }
a#contact { background-image: url(../img/menu_11.jpg); }
a#pictures { background-image: url(../img/menu_12.jpg); }
a#news:hover,
a#register:hover,
a#destination:hover,
a#travel:hover,
a#agenda:hover,
a#partners:hover,
a#staff:hover,
a#awards:hover,
a#faq:hover,
a#pictures:hover,
a#contact:hover
{ background-position: 0 -37px; }

http://www.maxi-hosting.nl/dump/menu_04.jpg