Recomendaciones para css en un menú.

[haga41]

Buenas noches,

Tengo un menú en una web, que está compuesto por un div con un ulk y varios li, cada li tiene un texto que es a su vez un enlace. El caso es que estoy pensando la forma de hacer que cambie a la vez el colro de fondo del li y el del texto del link, ya que tal y como lo tengo ahora, al ponerme encima del li, cambia su color de fondo pero si no estoy justo encima del texto con el enlace no cambia el color del texto.

Pongo unas imágenes y los css a ver si se entiende mejor.

Código HTML:

<div id="contenedor">
	<div id="columnaizquierda">
    	<ul>
            <li class="col1">
            	<a href="../index.asp">Inicio</a></li>
            <li class="col1">
            	<a href="../noticiasDiv.asp">Noticias</a></li>
            <li class="col1">
            	<a class="col1" href="../pruebasDiv.asp">Pruebas</a></li>
            <li class="col1">
            	<a href="../contacto.asp">Contacto</a></li>
            <li class="col1">
            	<a href="../comparativaDiv.asp">Comparativa</a></li>
            <li class="col1">
            	<a href="../linksDiv.asp">Links</a></li>
            <li class="col1">
            	<span class="col1"><a href="../usuariosDiv.asp">Zona de usuarios</a></span></li>
         </ul> 

Estilo.css

Código HTML:

#columnaizquierda{
	float: left;
	width: 170px;
	margin-top:4px;
	margin-left: 3px;
	margin-right: 3px;
	text-align: left;
	/*padding: 2px;*/
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	/*background-color:#000000;*/
	list-style-type: none;
	color:#FFFFFF;
	height:360px;
}
#columnaizquierda ul{
	list-style-type: none;
	background-color:#FFFFFF;
	color:#FFFFFF;
	margin:0px;
	padding:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px
	vertical-align:top;
}
#columnaizquierda ul li{
	background-color:#800001;
	color:#000000;
	padding:3px;
	margin-bottom:4px;
	margin-left:0px;
	margin-right:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: 1px solid #000000;
	text-align:left;
	width:162px;
	list-style-type: none;
	text-decoration:none;
	font-weight:bold;
}
.col1 a{
	color:#FFFFFF;
	text-decoration:none;
}
.col1 a:link{
	color:#FFFFFF;
	text-decoration:none;
}
.col1 a:hover{
	color:#800001;
	text-decoration:none;
}
#columnaizquierda ul li.col1:hover, #columnaizquierda ul li:hover {
	background-color:#FFFFFF;
	color:#80001;
	list-style-type: none;
	text-decoration:none;
}
#columnaizquierda ul li.col1:a, #columnaizquierda ul li:a {
	background-color:#800001;
	color:#000000;
	text-decoration:none;
}
#columnaizquierda ul li.col1:link, #columnaizquierda ul li:link {
	background-color:#800001;
	color:#000000;
	text-decoration:none;
}

Aquí pongo las imágenes, la primera es el menú tal cual aparece sin tocar nada, la segunda es el hover del li sin tocar el texto, la tercera es el hover encima del link del texto. Lo que quiero saber es si puedo hacer que el texto del link cambie de color al ponerme en el li o si solamente tengo que elegir un color para el texto que sea visible en los 2 estados, negro por ejemplo y ya está.

http://i524.photobucket.com/albums/cc328/s7474/css.jpg

Agradecería mucho cualquier ayuda o sugerencia.

[Garet]

Hola

Yo estot tratando de hacer exactamente lo mismo que tu, salvo que en vez de etiquetas <li> son etiquetas <p>

Había pensado hacerlo usando las propiedades onmouseover y onmouseout

Quedaría algo así

Código HTML:

<li class="col1" onmouseover="this.class='ClaseEncima' onmouseout="this.class='col1'> 

Peroooo no funciona, y me da que es por el this.class ...

Por cierto, si en vez de con <li> o con <p> lo haces con un <div> para cada menú y usando el codigo de antes asi que funciona.


Si a alguien se le ocurre algo mejor estaremos muy agradecidos.

[David]

El código que pusiste Garet, no funciona primero porque las comillas están mal, y segundo porque es className y no class.

Pero eso es Javascript, y al parecer el usuario que publicó el tema quería hacerlo con CSS.

[Triby]

Tendrías que poner medidas específicas para los links también, de otra forma sólo se modifica el fondo de texto en el link y no de toda el área donde aparece.

Código:

.col1 a {
    color: #fff;
    background-color: #800001;
    text-decoration: none;
    width: 200px;
    height: 20px;
}

.col1 a:hover {
    color: #800001;
    background-color: #fff;
}

Si es esto lo que buscas, ya sólo quedaría ajustar posición y alineación del texto, tal vez usando span.

[Mikmoro]

Lo que debes hacer es no dar el tamaño a los elementos de lista (li), sino a los enlaces (a).

Prueba con estos estilos en lugar de los tuyos:

#columnaizquierda{
float: left;
width: 170px;
margin-top:4px;
margin-left: 3px;
margin-right: 3px;
text-align: left;
/*padding: 2px;*/
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
/*background-color:#000000;*/
list-style-type: none;
color:#FFFFFF;
height:360px;
}
#columnaizquierda ul{
list-style-type: none;
background-color:#FFF;
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px
}
#columnaizquierda ul li{
margin:0 0 4px 0;
font-weight:bold;
}
.col1 a{
color:#FFF;
text-decoration:none;
background-color:#800001;
border: 1px solid #000;
width:162px;
padding:3px;
display: block;
}
.col1 a:hover{
color:#800001;
background-color:#FFF;
}

A ver qué tal.

[haga41]

¡Muchas gracias a todos, sois unos cracks!

Efectivamente poniendo la anchura a los enlaces en vez de a los elementos de lista, enlace ocupa lo que tiene que ocupar y queda perfecto.

He usado tu código Mikmoro y va de maravilla, muchas gracias.

[Mikmoro]

De nada, es un placer.

Saludos.