Ver Mensaje Individual
  #2 (permalink)  
Antiguo 01/11/2010, 18:43
PrendekZ
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 14 años, 4 meses
Puntos: 17
Respuesta: Problema con Hover en lista

Aver..

En el uno hay un error si te fijas bien:

Cita:
li.uno a:hover {background-color:*#039}
Hay un asterisco que no se porque lo colocaste, y aquí te lo arreglo:

Cita:
li.uno a:hover {background-color:#039;}
--------------------

Aquí te dejo el código y ami me funciona bien:

Cita:
<html>
<head>

<title>Zila - Poleras y Polerones</title>
<style>
* {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif}
a:link, a:active, a:visited {color: #036; text-decoration:none}
a:hover {text-decoration:underline}
#menu {float:right; width:200px}
#contenedor {margin:0 auto; margin-top:50px; width:600px; text-align:center}
ul {list-style:none; text-transform: uppercase capitalize; font-weight:bold;}
li {height: 70px; line-height: 70px; padding-left:10px; display:block; text-align:left;

border-top: dotted 1px #ddd}
li.uno {border-left: solid 5px #039;}
li.uno a:hover {background-color:#039;}
li.dos { border-left: solid 5px #900;}
li.dos a:hover {background-color:#900;}
li.tres { border-left: solid 5px #FC0;}
li.tres a:hover {background-color:#FC0;}
li.cuatro { border-left: solid 5px #360;}
li.cuatro a:hover {background-color:#360;}
</style>
</head>

<body>
<div id="contenedor"> <img src="logo.jpg" width="400" height="266" style="float:left;" />
<div id="menu">
<ul>
<li class="uno"><a href="#">Nosotros</a></li>
<li class="dos"><a href="#">Polerones</a></li>
<li class="tres"><a href="#">Poleras</a></li>
<li class="cuatro"><a href="#">Contacto</a></li>
</ul>
</div>

</div>
</body>
</html>
¿También quieres que aparesca en todo el bloque el fondo del Color?

Aquí tienes el código:

Cita:
<html>
<head>

<title>Zila - Poleras y Polerones</title>
<style>
* {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif}
a:link, a:active, a:visited {color: #036; text-decoration:none}
a:hover {text-decoration:underline}
#menu {float:right; width:200px}
#contenedor {margin:0 auto; margin-top:50px; width:600px; text-align:center}
ul {list-style:none; text-transform: uppercase capitalize; font-weight:bold;}
li {height: 70px; line-height: 70px; padding-left:10px; display:block; text-align:left;

border-top: dotted 1px #ddd}
li.uno {border-left: solid 5px #039;}
li.uno:hover {background-color:#039;}
li.dos { border-left: solid 5px #900;}
li.dos:hover {background-color:#900;}
li.tres { border-left: solid 5px #FC0;}
li.tres:hover {background-color:#FC0;}
li.cuatro { border-left: solid 5px #360;}
li.cuatro:hover {background-color:#360;}
</style>
</head>

<body>
<div id="contenedor"> <img src="logo.jpg" width="400" height="266" style="float:left;" />
<div id="menu">
<ul>
<li class="uno"><a href="#">Nosotros</a></li>
<li class="dos"><a href="#">Polerones</a></li>
<li class="tres"><a href="#">Poleras</a></li>
<li class="cuatro"><a href="#">Contacto</a></li>
</ul>
</div>

</div>
</body>
</html>
Prueba y me avisas..

Saludos!