Estimados:
Tengo el siguiente código, y quiero que cada elemento de la lista tenga un color de fondo distinto al hacerle el "hover". Con el siguiente codigo solo en el dos, tres y cuatro se me pone el color de fondo pero SOLO en el texto y no en todo el bloque. ¿Qué hago?
El codigo es:
Código HTML:
<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>