Dispongo de unas lista con el siguiente código
Código CSS:
Ver original
.menuprincipal ol li { list-style:none; margin-bottom: 5px; line-height: 10px; background-color:#c8d8ef; padding: 5px 5px 5px 5px; width: 540px; } .menuprincipal ol li:hover { background-color:#0067c1; color:#FFF; } .menuprincipal ol li a:hoover{ color:#FFF; }
A la hora de aplicar las listas tengo el siguiente codigo:
Código HTML:
Ver original
La cuestión es: sin hoover lo tengo en color de fondo claro y texto negro. Cuando hago un hoover encima de link tengo el fondo de <li> oscuro y texto blanco. Pero si hago un hover dentro del <li> pero fuera del link se pone el fondo oscuro, el link sigue negro y por supuesto no es clikable..
Antes tenia puesto el <li> dentro del link, pero no me lo valida.
¿Existe alguna forma de hacer que el link sea igual de ancho como el <li> (esos 540px)? He provado con aplicarle un width pero no ha funcionado,
¿se puede hacer que la zona sin texto del <li> sea clikable?
Os adjunto unas imagenes de como esta y como me gustaria
como es ahora:
como me gustaria:
Muchas gracias!!!