martes, 27 de junio de 2017

Menú sencillo con html y estilos css

Colocamos esta etiqueta donde queremos que salga el menú dentro del body
<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