<ul class="menu"> <li> <a href="uno.html">Uno</a></li> <li> <a href="dos.html">Dos</a></li> <li> <a href="tres.html">Tres</a></li> </ul>
En la etiqueta head colocamos los siguientes estilos
A continuación debemos quitar el punto
de la lista aplicando el siguiente estilo CSS, en el cual tambien
ponemos el padding y el margin a 0px para evitarnos problemas con los
diferentes navegadores
.menu{list-style:none; padding:0px; margin:0px;
}
Despues deberemos dar formato a las entradas del menú, en este caso las pondremos en horizontal con un margen y paddin de 2 px.
.menu li{
margin:2px; padding:2px; float:left;
}
A continuación indicaremos el color de fondo, el tamaño de las opciones del menu con el siguiente estilo css.
.menu li a{ display:block; width:100px; height:20px; text-decoration:none; text-align:center; color:#FFF; background-color:#ff9d7e; border-left:10px solid #ff4000; }Por último aplicaremos un estilo css para cuando nos situemos encima de las opciones del menú este cambie de color.
.menu li a:hover{ color:#CF0; background-color:#ff4000; border-left-color:#ff9d7e; }
No hay comentarios:
Publicar un comentario