Problema con propiedad hover

[ramiromd]

Buenas, estoy haciendo mis primeros pasos con CSS, para empezar a crear mis diseños.
El tema es que hice un menú horizontal simple. Le coloqué una imagen de fondo creada con photoshop, el menú no pasa de los 13px de alto.
Le coloque los links a las demas secciones de la página (desde el html) y quedo bien.
Después se me ocurrió colocarle un efecto hover a las opciones del menú. Y es lo que no me funciona, cuando paso el mouse el efecto no se activa. Será porque estoy usando una imagen de fondo en vez de color plano?.
Desde ya muchas gracias, abajo dejo escrito como definí el css:

Código:

@charset "utf-8";
/* CSS Document */

/* Margin : espacio entre contenedores o espacio contra el margen del navegador */
/* Padding : espacio entre un elemento (texto, imagen, o algo más) contra los bordes del contenedor */

* {padding: 0px; margin: 0px} /* mejora la visualizacion en distintos navegadores */

body{
	background-color: #FFF;
	/* background-image: url(img/fondo.png);
	background-repeat: repeat-x; */ 
}

#sombra{
	width: 900px;
	height: 650px;
	margin: auto;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-box-shadow: 0 0 5px 5px #888; /* mozilla */
	-webkit-box-shadow: 0 0 5px 5px#888; /* chrome */
	box-shadow: 0 0 5px 5px #888;
}

#page{
	background-color:#FFF;
	width: 900px;
	height: 650px;
	margin: auto;
	-moz-border-radius: 7px;  /*borde redondeado para navegadores Mozilla (Iceweasel, Firefox, Chameleon, otros..)*/
	-webkit-border-radius: 7px; /* borde redondeado para Safari y Chrome */
						   /*en navegadores Opera e IE no funciona esta opcion */
}

#header{
	widht: 66%;
	margin: auto;
	text-align:right;
	padding-right: 1%;
	height: 15%;
}

#logo{
	width: 34%;
	float:left;
}

#corniza{
	width: 100%;
	height: 4%;
	background-image:url(img/menu.png)
}

#contenido{
	width: 100%;
	height: 77%;
}


#pie{
	background-image: url(img/pie.png);
	width: 100%;
	height: 4%;
}


/* TEXTOS */

h1{
	text-align: center;
	/*padding-left: 27%;*/
	padding-top: 2%;
}

/* texto del header y pie de pagina */
h3{
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
}

/* opciones del menu */
h2{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#FFF;
	padding-top: 0.5%;
	padding-left: 1%;
	
}

ul{
	list-style-type: none;
}

li{
	padding-top: 0.5%;
	padding-left: 1%;
	display: inline;
	float: left;
}

p{
	font-family:Verdana, Geneva, sans-serif;
}

p.menu{
	font-size:12px;
	color:#FFF;
}

p.contenido{
	padding-top: 1%;
	padding-left: 1%;
	font-size: 14px;
	color:#000;
}

p.head{
	font-size:10px;
	color:#000;
	font-weight: bold;
}
	
/* ENLACES */

/* links del menu */

a.plain{
	text-decoration:none;
}
	
a:hover{
	background-image:url(img/hover.png); 
}

[kike2lucas]

Ayudaría que pongas el código HTML.

De todas maneras, estás definiedo la propiedad hover para el html, y no para el cuadro de tu menu. Supongo que funcionará si pones:

#corniza a:hover{
background-image:url(img/hover.png);
}

[ramiromd]

kike2lucas gracias por la respuesta, es que lo hice medio a las apuradas, ahora trato de pasar en limpio y poner las cosas lo más detalladas posibles.
Hice algunos retoques en un documento nuevo para empezar de 0 y no lanzarme a hacer algo más complejo a la hora de aprender.

Cree el siguiente CSS:

Código:

#page{
	background-color:#FFF;
	width: 900px;
	height: 650px;
	margin: auto;
}

#header{
	widht: 100%;
	margin: auto;
	text-align:right;
	padding-right: 1%;
	height: 15%;
}

#menu{
	width: 100%;
}

#contenido{
	width: 100%;
	height: 77%;
}


#pie{
	width: 100%;
	height: 4%;
}

ul{
	list-style-type: none; /* saca las viñetas */
}

li.menu{
	padding-top: 0.5%;
	padding-left: 1%;
	float: left;
}

p.menu{
	font-size:12px;
	color:#FFF;
}

a.menu{
	text-decoration:none;	
}
	
a:hover{
	color:#003;
}

La parte en cuestión del html es la siguiente:

Código:

    <div id="contenido">
		<p class="contenido">Aca va el contenido.</p>
           <div id="menu">
			<ul>
	      		<li class="menu"><a class="menu" href="home.html"><p class="menu">Inicio</p></a></li>
	      		<li class="menu"><a class="menu" href="#"><p class="menu">¿Qui&eacute;nes Somos?</p></a></li>
	      		<li class="menu"><a class="menu" href="#"><p class="menu">¿C&oacute;mo llegar?</p></a></li>
	      		<li class="menu"><a class="menu" href="#"><p class="menu">Contacto</p></a></li>
			</ul>
    	</div>
    </div>

A priori, el hover sobre el texto del link me funciona. Ahora para lograr que cambie el color de fondo, o que me dibuje un borde para el <li> todavía no le puedo encontrar la vuelta :(.
Kike2lucas, cómo aplicaría en este nuevo CSS lo que me sugeriste ? y en el html como lo invoco ? en el CSS debo definir #menu{...} y #menu a:hover{...} ?.

Saludos y gracias.

[ArturoGallegos]

amigo, simplifique su html asi como lo tiene es algo sucio

<li class="menu"><a class="menu" href="#"><p class="menu">Contacto</p></a></li>

coloque solo

<li class="menu"><a href="#">Contacto</a></li>

y en su css algo como por ejemplo:

Código CSS:

li.menu a{display:block;padding:3px 8px;font-size:12px;color:#fff;text-decoration:none;}
li.menu a:hover{color:#003;}
 

[ramiromd]

Ag666, tus modificaciones han funcionado de 10. Una última consulta, si yo quisiera que solo se ilumine el <li> afectado por el hover, con el background-color no me funcionaria, debería agregar una "capa" por <li> ??.

[ArturoGallegos]

el código como lo coloque afecta solo al <li><a> sobre el que te ubiques... no comprendo del todo tu pregunta, igual si lo que necesitas es que se ilumine el <li> sin tener un enlace deberás aplicar

Código CSS:

li:hover{}/*para todos los <li> */
li.menu:hover{}/*para todos los <li> con la clase menú*/
#menu li:hover{}/*para todos los li que estén dentro del ID menú*/
 

que por cierto ahora que vuelvo a ver tu código bastaría con colocar

Código HTML:

<div id="menu">
   <ul>
      <li><a href="home.html">Inicio</a></li>
      <li><a href="#">¿Qui&eacute;nes Somos?</a></li>
      <li><a href="#">¿C&oacute;mo llegar?</a></li>
      <li><a href="#">Contacto</p></a></li>
    </ul>
</div>
 

Código CSS:

#menu li a{display:block;padding:3px 8px;font-size:12px;color:#fff;text-decoration:none;}
#menu li a:hover{color:#003;}
 

:) con eso ahorrarías algo de código jeje