Tutorial CSS: Como hacer esto:

hover gigante en IE

No es magia, no es IE7, no es Firefox disfrazado, solamente es parte del rediseño de blogut, que me ha servido para experimentar con bloques y aprender a hacer barras de navegación horizontales en bloque o columnas, pulsa en leer mas para ver el tutorial.

HTML:

<ul class="topmenu">
<li class="topmenuli"><a href="#">Enlace1</a></li>
<li class="topmenuli"><a href="#">Enlace2</a></li>
<li class="topmenuli"><a href="#">Enlace3</a></li>
<li class="topmenuli"><a href="#">Enlace4</a></li>
</ul>

Como ves, estamos creando una lista desordenada con enlaces, en # pon el destino del enlace.
Los class no hacen falta si es nuestra unica barra de navegación horizontal, pero son recomendados para el futuro, una vez puesto eso, pasemos al css:

ul

.topmenu {
margin-left: 0px;
}

Haciendo esto, hemos corrido el elemento ul a la izquierda, por lo que desaparecerán los puntitos de la lista, y parecerá una lista de enlaces.

li

.topmenu .topmenuli {
display: inline;
list-style-type: none;
margin-left: 0px;
}

Lógicamente, hacemos desaparecer la lista y los ponemos en linea, si te ha salido bien, deberías ver todos los enlaces seguidos

li a

Entero

.topmenu .topmenuli a {
display: block;
width: 70px;
height: 20px;
float: right;
margin-top: 0px;
margin-right: 3px;
padding-top: 113px;
color: #FFFFFF;
text-decoration: none;
padding-right: 4px;
padding-left: 4px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
letter-spacing: -1px;
}

Light

.topmenu .topmenuli a {
display: block;
width: 70px;
height: 20px;
float: left;
padding-top: 113px;
}

Normal

.topmenu .topmenuli a {
display: block;
float: left;
}

El entero es la versión que he usado en blogut, la light tiene solo lo necesario para funcionar, fíjate en el uso de “float: left” para hacer que salgan seguidos.
La normal no tiene nada de lo usado en blogut, y salvo que le pongas algo, es mejor hacerlo inline

Toque final

.topmenu .topmenuli a:hover {
background-color:#DC0000

}

La magia viene porque, aunque IE solo acepta :hover en a, puede aceptar :hover también en los a con selector, por lo que simplemente esto cambia el fondo. Puedes ver el archivo final ( Solo 4kb) aquí, si usas Opera puedes desactivar el css para ver como se hizo.

Escribe un comentario

Your email is never published nor shared. Los campos requeridos están marcados con *

*
*