Poner un fondo encima de otro fondo al hover

[Erpop]

Sé que el título no explica mucho, pero es algo así..

Resulta que yo tengo un menú con un fondo X. Y quiero que al pasarle el mouse por encima, se ponga un fondo Y encima del X, el cual es un una especie de óvalo.

Mi problema es que no sé como hacerlo, he intentado hacer dos hover, pero nada que me funciona...

Les pongo mi código CSS del menú:

Código CSS:

#nav {
    background: #a1ba25;
font: Verdana;
list-style: none;
text-decoration:none;
margin:0;
padding:0;
}
 
.nav > li {
float:left;
list-style:none
}
 
.nav li a {
background:#a1ba25;
color:#FFF;
display:block;
padding:10px 12px;
list-style:none;
font: normal 12px Verdana;
font-weight: bold;
text-align: center;
}
 
.nav li a:hover {
background:#C9DF60;
border-radius: 10px;
font: normal 12px Verdana;
color: #000;
font-weight: bold;
padding:10px 12px;
 
}
 
.nav li ul {
display:none;
position:absolute;
min-width:140px;
list-style:none
}
 
.nav li:hover > ul {
display:block;
list-style:none
}
 
.nav li ul li {
position:relative;
list-style:none
}
 
.nav li ul li ul {
right:-140px;
top:0;
list-style:none
}
 

En este caso, quiero que el fondo #a1ba25, se quede y encima de él se ponga el óvalo c9df60, no sé si me doy a entender..

Saludos y gracias de antemano.

EDIT:

También me gustaría saber como al tener un header con float, esté pegado a lo más arirba de la página.. Porque siempre hay una separación.

[comablck]

por q no intentas ponerle el hover al 'li'.. en lugar de al 'a'

[Erpop]

Se hace un cuadro grandote, mira:

[Erpop]

Lo solucioné. Si a alguien le interesa:
Lo que hice fue crear un nuevo id en el css de nombre "menu" y con el fondo que quería que fuese estático (en este caso el color a1ba25), entonces en cada <li> puse: <li id="menu"> y listo.

Gracias de todas formas.