Fondo menu y hover

Hola, estoy haciendo una web y me encuentro un problema en el menú, al pasar el ratón por encima de la opción de menú correspondiente este debe cambiar el fondo, esto está bien, el problema es que entre opción y opción hay un separador que es una imagen que he puesto como fondo del li que contiene a la opción y al hacer hover se sigue viendo esta imagen del menú siguiente. Os dejo una url a un ejemplo para que veais lo que digo. El ideal es lo que pasa en el último menú (contacto).

http://pruebas.ainvar.net

¿Alguien sabe como hacerlo?

Gracias

Creo que seria mas facil si utilizar un border que una imagen ya que es practicamente imposible que un boton en estado over tape la linea respectiva

Ofitools tiene toda la razón.
En estos casos es mejor emplear bordes.
Yo lo que haría, para empezar, es poner un borde de color azul en la derecha de cada enlace del menu, menos en el último elemento del menu.
Sería así:

Código :

#cabecera #menu a{
    border-right:2px solid #80f2fe;
}
#cabecera #menu a:last-child{
    border-right:none;
}

Para evitar que el borde de color azul ocupe toda la altura del menu, empleamos los margenes:

Código :

#cabecera #menu a{
margin-top:12px;
}

Quitale el padding a los enlaces del menu. (ahora tienes padding-top:12px) Y tambien la altura (ahora tienes height:30px).

Ahora solo falta que al pasar el raton por encima, "desaparezca" el borde. Lo pongo entre comillas porque no lo vamos a hacer desaparecer, sino que le cambiaremos el color para que coincida con el del fondo y no se vea.

Código :

#cabecera #menu a:hover{
    border-right:2px solid #999a8f;
}

Lo he hecho todo un poco de memoría y no se si funcionará a la perfección.
Pruebalo y me cuentas!!!

Hola, primero gracias a ambos por contestar, terreo76, yo hice una chapuza, que es aumentar el ancho del enlace en el hover, esto funciona, aunque mueve un poco el texto, así que voy a probar tu solución a ver que tal.

De nuevo gracias por la ayuda.

Siento decir que esto no funciona, pues el problema es el mismo que con la imagen de fondo, el borde derecho del menu anterior sigue siendo visible, así que de momento me quedo con mi chapuza. Gracias de todos modos.

En vez de aumentar el tamaño has que el evento hover tenga un border-lef de color gris que tape el separador y asi el texto no se mueve ni visualmente se amplia el ancho del botón

Buena idea daidalos, Gracias.