Problema con Menu emergente

[demoniooculto_2008]

Mi problema es el siguiente: hice un menu emergente con CSS y me quedo como queria. Al menu le puse una imagen de fondo y otra diferente para cuando el mouse queda encima. Lo que yo quiero es que al posisionar el mouse sobre dicho menu y la imagen cambie se mantega esa misma imagen mientras exploro el submenu, ya que cuando saco el puntero del mouse del menu la imagen vuelve a la que le puse de fondo por defecto.

Aqui dejo el codigo CSS del menu:


.menuContainer {
background-color: #0000FF;
}

.menuContainer ul{
list-style:none;
margin:0;
padding:0;
}


ul#menuem li { /******fondo texto menu oculto**********/
float:left;
list-style: none;
background-color: none;
}

ul#menuem a { /***menu visible---imagen de fondo por defecto***/
display:block;
width: 320px;
height: 105px;
color:#FFF;
text-decoration:none;
background-image: url(images/menuem.png);
}

ul#menuem a:hover { /***imagen de fondo cuando el mouse queda encima de la imagen***/
display: block;
background-image: url(images/menuem_hover.png);
}

ul#menuem ul { /****fondo del menu oculto****/
position: absolute;
display: none;
width: 960px;
height: 30px;
background-image: url(images/Fondo_menuhover_desplegable.p…

}

ul#menuem li:hover ul {
display: block;
}

ul#menuem li:hover ul li {
margin:0;
margin-top: 3px;
}

ul#menuem li:hover ul li a { /***texto del menu oculto****/
padding-left: 10px;
padding-right: 35px;
padding-top: 2px;
width: auto;
height: 18px;
text-align: left;
color: #FFFFFF;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
background-image: none;
margin-left: 32px;
outline: 0;

}

ul#menuem li:hover ul a:hover { /***hover del texto del menu***/
color: #00FF00;
outline: 0;
}





Y aqui dejo el codigo HTML:

<div class="menuContainer">
<ul id="menuem">
<li><a href="#"></a>
<ul>
<li><a href="#">Carmelo</a></li>
<li><a href="#">Colonia del Sacramento</a></li>
<li><a href="#">Fray Bentos</a></li>
<li><a href="#">Mercedes</a></li>
<li><a href="#">Nueva Palmira</a></li>
<li><a href="#">Paysandú</a></li>
<li><a href="#">Salto</a></li>
</ul>
</li>
</div>




Ante todo muchas gracias, y ojala puedan darme una solucion. Ya que necesito el menu para tener terminada mi web.

[laratik]

Que tal si en vez de hacerle hover a los enlaces, le haces hover a los elementos de listas, de esta manera como el <li> principal contiene a todos los que conforman el submenú, hasta que no salga completamente el menú, no cambiaría de color, seria algo así:

Código CSS:

<style>
.menuContainer {
background-color: #0000FF;
}
 
.menuContainer ul{
list-style:none;    
margin:0;
padding:0;
}
 
 
ul#menuem li { /******fondo texto menu oculto**********/
float:left;
list-style: none;
background-color: none;
background: #03F;
}
 
ul#menuem a { /***menu visible---imagen de fondo por defecto***/
display:block;
width: 320px;
height: 105px;
color:#FFF;
text-decoration:none;
}
 
ul#menuem a:hover { /***imagen de fondo cuando el mouse queda encima de la imagen***/
display: block;
}
 
ul#menuem li:hover {
    background:#FF0;
}
 
ul#menuem ul { /****fondo del menu oculto****/
position: absolute;
display: none;
width: 960px;
height: 30px;
background: #F00;
 
}
 
ul#menuem li:hover ul {
display: block;
color: #FF0;
}
 
ul#menuem li:hover ul li {
margin:0;
margin-top: 3px;
}
 
ul#menuem li:hover ul li a { /***texto del menu oculto****/
padding-left: 10px;
padding-right: 35px;
padding-top: 2px;
width: auto;
height: 18px;
text-align: left;
color: #FFFFFF;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
background-image: none;
margin-left: 32px;
outline: 0;
 
}
 
ul#menuem li:hover ul a:hover { /***hover del texto del menu***/
color: #00FF00;
outline: 0;
}
</style>
 

He cambiado las imágenes por colores para observar rápidamente el efecto.