Help with menu CSS colors urgent

[smile]

Hi, I use Joomla CMS and need help with template.

 

 

 

I need help with my menu CSS colors.

 

Here is picture What it looks like and what I need it to be:

 

My Problem:

 

When I select second level menu item the first level menu background color is lost.

 

Here is my CSS code:

 

/* MAIN NAVIGATION
--------------------------------------------------------- */
#ja-mainnav {
float: left;
width: 100%;
font-size: 1em;
line-height: normal;
background: #646E7B;
border-bottom: 5px solid #4F96F8;
}

#ja-subnavwrap {
clear: both;
float: left;
width: 100%;
background: #4F96F8;
border-bottom: 5px solid #4F96F8;
}

#ja-subnav {
padding: 0 10px;
}

/* Default Joomla! Menu */


a.mainlevel {
padding: 3px;
border-bottom: 1px solid #C6CED9;
display: block;
color: #646E7B;
text-decoration: none;

}

a.mainlevel:hover {
color: #4F89D2;
background: #DFE5EC;
text-decoration: none;}
a.mainlevel:active {
color: #4F89D2;
background: #DFE5EC;
text-decoration: none;
background:#4F89D2 none repeat scroll 0%;
}
a.mainlevel:focus {
color: #4F89D2;
background: #DFE5EC;
text-decoration: none;

}

a.mainlevel#active_menu {
background: #4F89D2;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;	
}

a.sublevel {
padding: 2px 4px 2px 12px;
display: block;
background: url(../images/bullet-list2.gif) no-repeat 2% 50%;
text-decoration: none;
color: #646E7B;
}

/* 2 lygio meniu - uzvedus pele
--------------------------------------------------------- */
a.sublevel:hover,
a.sublevel:active,
a.sublevel:focus {
text-decoration: none;
background: url(../images/bullet-list3.gif) no-repeat 2% 50%;
color: #4F89D2;
font-weight: bold;
}

/* 2 lygio meniu - paspaudus
--------------------------------------------------------- */
#active_menu {
background: url(../images/bullet-list3.gif) no-repeat 2% 50%;
color: #4F89D2;
font-weight: bold;

}

#ja-rightcol a.mainlevel {
border: none;
}
/*End: Default Joomla! Menu  */

[writer]

Not sure how you're going to solve this: To get the background color, you need to use a:active, but you can only have one link active at a time.

[shlumph]

Might have to give each link an ID and change it with javascript onclick events.