Ho un problema nella creazione di un menu con sottomenu a tendina.
Come potete vedere dalla seguente immagine, passando sul link nella barra principale del menu, il link acquisisce uno sfondo con una riga verde (quello con la riga gialla indica la pagina corrente)

Quando muovo il mouse sul sottomenu, il link nella barra principale perde lo sfondo con la riga verde come mostrato qui sotto

Come faccio a far mantenere lo sfondo con la riga verde al link nella barra principale mentre passo sul sotomenu?
Un po' di codice:
struttura HTML del menu:
CSS
codice:
div#crd_menu {
width: 100%; height:33px;
float: left; padding: 0;
border-top: 1px solid black;
background-image:url('images/menuback.png');
background-repeat:repeat-x;
}
div#crd_menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
div#crd_menu li {
width:100px; height:33px;
float:left;
margin: 0; padding: 0;
border-right: 1px solid black;
color:black;
}
div#crd_menu a {
display: block;
font-family:arial;
height:33px;
line-height: 33px;
color: #ffffff;
text-decoration: none;
background-image:url('images/menuback.png');
}
div#crd_menu a:hover {
background-image:url('images/menuback_h.png');
color: #1ed500;
text-decoration: none;
}
div#crd_menu li ul {
display: none;
}
div#crd_menu li:hover ul {
display: block;
position: absolute;
z-index:1;
width:200px;
text-align:left;
padding: 0;
margin: 0 0 0 -1px;
border:1px solid black;
}
div#crd_menu li li {
border: none;
width: 200px;
}
div#crd_menu li li a {
padding: 0px 2px 0px 10px;
background-image:url('images/menusub.png');
background-color:#3e3e3d;
}
div#crd_menu a.crd_active {
background-image:url('images/menuback_a.png');
color:#f7b20d;
}
div#crd_menu a.crd_active:hover {
background-image:url('images/menuback_h.png');
color:#1ed500;
}