Problema con Menu emergente

[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.