Volviendo con los artículos sobre HTML5 hoy vamos a ver cómo hacer un menú horizontal básico utilizando html5 y CSS3 (sobre todo CSS3).

En fin, en el marcado poca chicha hay. Es decir, lista desordenada de toda la vida, y el único cambio es que usaremos la etiqueta nav:

<nav>
  <ul>
<ul>
	<li><a class="hiddenSpellError">title="Primero" href="#">First</a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">title="Segundo" href="#">Second</a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">title="Tercero" href="#">Third</a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">title="Cuarto" href="#">Fourth</a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">title="Quinto" href="#">Fifth</a></li>
</ul>
  </ul>
<!--<span class="hiddenSpellError" pre=""-->nav>

Con esto la parte HTML5 ya está liquidada. Ahora toca empezar a trastear con CSS3. Lo primero es el css de la sección NAV, donde pondremos bordes redondeados, degradado de blanco a gris y definiremos el tamaño. Luego a los elementos de lista les quitaremos el botón de lista y los flotaremos a la izquierda(como en cualquier menú horizontal tradicional). También añadiremos una transición a cada enlace. Como CSS3 todavía no está estandarizado hay que usar propiedades espcíficas para cada navegador. En el futuro debería funcionar en todos con la propiedad estandar.

nav{
    /*Borde redondeado*/
    -webkit-border-radius:9px;/*Chrome y Safari*/
    -moz-border-radius:9px;/*Firefox*/
    -o-border-radius:9px;/*Opera*/
    border-radius:9px;/*Estandar*/
    /*Color degradado*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#BBB));/*Chrome y Safari*/
    background-image: -moz-linear-gradient(top center, #FFF, #BBB);/*Firefox*/
    background-image: -o-linear-gradient(top, #FFF, #BBB);/*Opera*/
    background-image: linear-gradient(top, #FFF, #BBB);/*Estandar*/
    overflow:hidden;
    padding:12px;
    width:890px;
}

nav ul{
    list-style:none;
    margin:0 10px 0 10px;
    padding:0;
}

nav ul li{
    /*Borde redondeado*/
    -webkit-border-radius:6px;/*Chrome y Safari*/
    -moz-border-radius:6px;/*Firefox*/
    -o-border-radius:6px;/*Opera*/
    border-radius:6px;/*Estandar*/
    float:left;
    font-size:16px;
    font-weight:bold;
    margin-right:11px;
    text-align:center;
    /*Sombras*/
    text-shadow: 0px 1px 0px #FFF;
}

nav ul li a{
    color:#AAA;
    display:block;
    padding:10px;
    text-decoration:none;
    /*Transiciones*/
    -webkit-transition: 0.3s linear all;
    -moz-transition: 0.3s linear all;
    -o-transition: 0.3s linear all;
    transition: 0.3s linear all;
}

Bueno, tenemos el color de fondo, tenemos los bordes, tenemos la lista en formato horizontal… ¿Qué nos falta? Pues nos falta definir qué ocurre cuando naveguemos sobre los enlaces, cuando pongamos el ratón encima. Para eso utilizamos la pseudo-clase :hover de toda la vida, pero en este caso con degradados y sombras. Además, el texto se oscurecerá.

nav ul li:hover{
    /*Color degradado*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to( #E3E3E3));/*Chrome y Safari*/
    background-image: -moz-linear-gradient(top center, #FFF, #E3E3E3);/*Firefox*/
    background-image: -o-linear-gradient(top, #FFF, #E3E3E3);/*Opera*/
    background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar*/
    /*Sombras*/
    -webkit-box-shadow:  1px -1px 0px #999;/*Chrome y Safari*/
    -moz-box-shadow:  1px -1px 0px #999;/*Firefox*/
    -o-box-shadow:  1px -1px 0px #999;/*Opera*/
    box-shadow:  1px -1px 0px #999;/*Estandar*/
    border:1px solid #E3E3E3;
}

nav ul li a:hover {
    color:#000;
}

Y ahí tenéis un menú con estilo css3 bien chulo, recordad si lo testeáis que en los navegadores antiguos no va a funcionar, así que si tenéis IE6 o 7… instalad un navegador actualizado, que son gratis, joder.