El problema
Tengo unos enlaces dentro de elementos de lista, para un menú de navegación.
Esos enlaces se convierten en bloque mediante CSS, con la propiedad display:block;
.
En Firefox, Opera e Internet Explorer 7 el enlace funciona correctamente, aunque no se pase el puntero por encima del texto de enlace.
En Internet Explorer 6 hay que pasar el puntero por encima del texto de enlace, en caso contrario el enlace no se activa.
ul {list-style-type: none; margin:0; padding:0; width:160px;}
ul li {background:#FFFF99; margin-bottom:3px; border-bottom:1px solid #fff;}
ul li a {display:block; padding:4px;}
ul li a:hover {background-color:#FFCC66;}
La solución
Darle una anchura fija al enlace:
ul {list-style-type: none; margin:0; padding:0; width:160px;}
ul li {background:#FFFF99; margin-bottom:3px; border-bottom:1px solid #fff;}
ul li a {display:block; padding:4px;width:160px;width:152px;}
ul li a:hover {background-color:#FFCC66;}
Ejemplo de funcionamiento
Atención: el efecto solo se observará en Internet Explorer 6 y anteriores.