Need help with :active state

[victorduwon]

Hi Folks,
i have a list based navigation menu with two tiers of navigation. The second tier displays when the tabs on the first tier are hovered over. The problem I have is that when the tabs are clicked on the second tier dissapears. I need the second tier for the active tab to remain visible and the background of the tab to remain visible when the tab is clicked/active. Someone please help me, this is driving me crazy. Below is the CSS.

Thanks.

@charset "UTF-8";
/* CSS Document */

.test_nav {
	height:26px;
	width:943px;
	text-align: center;
	position:absolute; 
	font-family:arial, verdana, sans-serif; 
	font-size:11px;
	z-index:500;
	border-top: #CCC solid 1px;
	border-bottom: #CCC solid 1px;
}

.test_nav .select {
	margin:0; 
	padding:0; 
	list-style:none; 
	white-space:nowrap;
}

.test_nav li {
	float:left;
}

.test_nav .select a {
	display:block; 
	height:26px; 
	float:none; 
	padding: 0 0 0px; 
	text-decoration:none; 
	line-height:25px; 
	white-space:nowrap; 
	color:#000;
}

.test_nav .select li.line a {
	text-align: center;
	color:#000;
}

.test_nav .select a b {
	display:block; 
	padding:0 20px 0px 16px; 

}

.test_nav .select a:hover, 
.test_nav .select li:hover a {
	text-decoration: none;
	text-align: center;
	color: #a90909;
	background-image: url(subnav_bg_blue.gif);
}

.test_nav .select li.line a:hover, 
.test_nav .select li.line:hover a {
	color:#cfa;
}

.test_nav .select a:hover b, 
.test_nav .select li:hover a b {
	text-decoration: none;
	color: #fff;
}

.test_nav .sub {
	display:none;
}
.test_nav ul ul {
	display:none;
}

/* IE6 only */
.test_nav table {
	border-collapse:collapse; 
	margin:-1px; 
	font-size:1em; 
	width:0; 
	height:0;
}

.test_nav .sub {
	margin:0; 
	padding:0;
	list-style:none;
}

.test_nav .sub li {background:transparent;}

.test_nav .select :hover .sub {
	height:25px;
	display:block; 
	position:absolute;
	float:left;
	width:943px;
	top:26px; 
	left:1px; 
	text-align:center;
	border:1px solid #ccc;
	border-width:1px  0;
}

.test_nav .select :hover .rt li {
	float:right;
}

.test_nav .select :hover .sub li a {
	display:block; 
	height:26px; 
	line-height:26px; 
	float:left; 
	background:transparent url(line/transparent.gif);
	padding:0 12px; 
	margin:0; 
	white-space:nowrap; 
	color:#888;font-size:9px;
}

.test_nav .select :hover .sub li.subline a {color:#000;}

.test_nav .select :hover .sub li a:hover,
.test_nav .select :hover .sub li:hover
{color:#000; line-height:26px; position:relative;}

.test_nav .select :hover .sub li:hover > a {color:#000;}

.test_nav .select :hover .sub :hover ul {
	padding:0;
	margin:0; 
	list-style:none; 
	display:block; 
	width:112px; 
	position:absolute; 
	left:-1px; 
	top:26px; 
	border-bottom:1px solid #000; 
	background:#fff;
}

.test_nav .select :hover .sub :hover ul ul {
	position:absolute; left:-9999px;
}

.test_nav .select :hover .sub :hover ul li {
	border:1px solid #fff; border-width:0 1px;
}

.test_nav .select :hover .sub :hover ul li a {
	width:80px; 
	text-align:left;
	height:26px; 
	line-height:18px; 
	background:#fff;
 }
.test_nav .select :hover .sub :hover ul li a:hover {
	line-height:16px;
}
.test_nav .select :hover .sub :hover ul li:hover > a {
	line-height:26px;
}

.test_nav .select :hover .sub :hover ul :hover ul {
	left:112px; 
	top:0; 
	border:1px solid #ccc; 
	border-width:0 1px 1px 0;
	background:#fff;
 }

.test_nav .select :hover .rt :hover ul :hover ul {
	left:-113px; 
	top:0; 
	border:1px solid #ccc; 
	border-width:0 0 1px 1px;
}

.test_nav .select :hover .sub :hover ul :hover ul li {
	border-left:1px solid #ccc; 
	background:#fff;
}

.test_nav .select :hover .sub :hover ul :hover ul li.a1 {
	border-left:1px solid #fff;
}
.test_nav .select :hover .sub :hover ul :hover ul li.a2 {
	border-top:1px solid #000;
	height:26px;
}

.test_nav .select :hover .rt :hover ul :hover ul li {
	border-right:1px solid #000;
	border-left:0;
}

.test_nav .select :hover .rt :hover ul :hover ul li.a1 {
	border-right:1px solid #fff; 
	border-left:0;
}

</style>

Someone please tell me what I am doing wrong.