<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