barra de navegacion elegante

[babri]

yo el que he hecho, lo tengo en HTML5 y está englobado dentro de esta etiqueta:

Código HTML:

<nav>
        <!-- Listado de Navegación -->
        <ul class="menu">  
            <li><a href="#">Home</a></li>  
            <li><a href="#">Quienes Somos</a></li>  
            <li><a href="#">Que Hacemos</a></li>
            <li><a href="#">Clientes</a></li>
            <li><a href="#">Club Coolaboro</a></li> 
        </ul>    
</nav>
 

La etiqueta nav indica que es la barra de navegación y luego en un archivo CSS le tengo puesto esto:

Código CSS:

nav {
position : absolute;
left : 0;
width : 100%;
background : url(../imagenes/nav_background.png);
}
nav ul {
margin : 0 auto;
width : 940px;
list-style : none;
}
nav ul li {
float : left;
}
nav ul li a {
display : block;
margin-right : 20px;
width : 140px;
font-size : 14px;
line-height : 44px;
text-align : center;
text-decoration : none;
color : #ccc;
}
nav ul li a:hover {
color : #fff;
}
nav ul li.selected a {
color : #fff;
}
 

Y este es el resultado:



La imagen que he usado para la nav (nav_background) es esta:




PD: la barra ocupa el 100% de la página siempre y le da un estilo muy chulo =P