Tema: Problema con a:hover en ul y li
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 21/03/2011, 21:05
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 8 meses
Puntos: 192
Respuesta: Problema con a:hover en ul y li
Bueno pues la respuesta es simple. A la hora de estilizar <a>'s dentro de otro elemento, por razones de usabilidad y para evitar este tipo de problemas siempre se debe preferir estilizar el anchor (<a>) y no su contenedor. En tu caso, los estilos de fondo, paddings y todo eso debes dárselo al anchor. Te muestro como:
Código CSS: 
Ver original
  1. body {
  2.     margin-left: 0px;
  3.     margin-top: 0px;
  4.     margin-right: 0px;
  5.     margin-bottom: 0px;
  6. }
  7.  
  8. #cont_global {
  9.     width: 1007px;
  10. }
  11. #header {
  12.     background-image: url(images/logo.png);
  13.     height: 196px;
  14.     width: 1007px;
  15. }
  16. #cont_buttons {
  17.     height: 196px;
  18.     width: 1007px;
  19.     overflow: hidden;
  20. }
  21. #cont_buttons ul li {
  22.     float: right;
  23.     list-style-type: none;
  24.     margin-right: 5px;
  25.     margin-top: 137px;
  26. }
  27. #cont_buttons ul li a{
  28.     padding-left: 10px;
  29.     -webkit-border-top-left-radius: 10px;
  30.     -webkit-border-top-right-radius: 10px;
  31.     -moz-border-radius-topleft: 10px;
  32.     -moz-border-radius-topright: 10px;
  33.     border-top-left-radius: 10px;
  34.     border-top-right-radius: 10px;
  35.     font-size: 14px;
  36.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  37.     color: #FFF;
  38.     font-weight: bold;
  39.     padding-top: 3px;
  40.     padding-right: 7px;
  41.     padding-bottom: 3px;
  42.     background:red;
  43. }
  44. #cont_buttons a:hover {
  45.     background:yellow;
  46. }

¿Se entiende a lo que me refiero?

Ahí vas a ver que el fondo se aplica correctamente.