En este post vamos a crear un menu sencillo para tu página web basado en html y css.

Lo primero que tenemos que hacer es crear dentro del BODY de nuestra web la lista que funcionara como el menu de nuestra web, en este caso una lista desordenada y la aplicamos las clase menu para trabajr mejor con ella desde CSS.

<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>

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;
}

Podemos ver un ejemplo: