fondo de un color encima de un enlace

[torturo]

hola personas... tengo esta problemática que no se como solucionarla...

estoy haciendo una página en donde pongo un enlace y cuando alguien pasa el mouse sobre el enlace este quisiera que ponga una imagen ARRIBA del enlace... no sé si me estoy explicando... ya he leido que con CSS puedo ponerle un background atrás del enlace... pero lo que quiero es que quede ARRIBA de ella (ponerlo SOBRE el enleace) les dejo lo que llego en html y css:

HTML:

<div class="mimenu">
<ul>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://google.com">Google</a></li>
</ul>
</div>

CSS

body{padding:0px; margin:0px;}
.principal{width:950px; margin:0px auto; padding:0px}
.mimenu ul{list-style-type: none; padding:0px; margin:0px; margin-top:10px;}
.mimenu li{float:left; list-style-type: none; padding: 0px 5px; }
.mimenu li a{color:red; }
.mimenu li a:hover{color:red; background-position: 10px; background-color: black; }

o he encontrado la forma aún... agradecería a alguien que pudiera ayuar...

[GAST0N]

agrega al css lo siguiente

li:hover {background-image:"LA URL DE TU IMAGEN" ;}

saludos!!

[torturo]

lo que quiero es que sse ponga una barrita azul a la parte de arriba del enlace (del LI) por eso uso background-color y no image...
pero nohe logrado hacer que se ponga encima del LI

[GAST0N]

Iniciado por torturo

lo que quiero es que sse ponga una barrita azul a la parte de arriba del enlace (del LI) por eso uso background-color y no image...
pero nohe logrado hacer que se ponga encima del LI

no le pongas position al hover.. solo el color de fondo

[torturo]

eso hice pero se pone atrás del enlace... y no quiero que se ponga atrás... quiero que te pona ENCIMA:
ejemplo

======= (elos signos de igual repretengan la barrita con el color azul)
ENLACE

[GAST0N]

que tal asi:

.mimenu li a:hover{color:black; background-color: black; }

de esa manera quedaria todo negro

[torturo]

así es, quedaría todo negro, pero lo que quisiera es que queda sólo la parte de arriba... encima del texto

[blanchrt]

Aunque el tema es antiguo, respondo aquí por si alguien se encuentra en el mismo caso:

Ponle al li a:hover un border-top: 8px solid blue; (o los valores que quieras).

Para controlar la separación de la barrita juega con padding-top.

Un saludo

[moises_13__35]

Excelente respuesta eficaz y sencilla y así te ahorras el peso de la imagen.