Menus simples con CSS y listas (2)

Menu Horizontal

HTML

<div id="menuh">
<ul>
<li><a href="#menuh" id="primero">Inicio</a></li>
<li><a href="#menuh">Comentarios</a></li>
<li><a href="#menuh">Noticias</a></li>
<li><a href="#menuh">Contacto</a></li>
<li><a href="#menuh">Acerca de nosotros</a></li>
</ul>
</div>

CSS

#menuh {
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top: 20px;
}

#menuh ul, li {
list-style-type: none;
}

#menuh ul {
margin: 0;
padding: 0;
}

#menuh li {
float: left;
}

#menuh a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
padding: 3px 10px;
text-align: center;
border: 1px solid #ACCFE8;
border-width: 1px 1px 1px 0;
}


#menuh a#primero {
border-left: 1px solid #ACCFE8;
}

#menuh a:hover {
background: #DBEBF6;
}

Como vieron es sencillísimo podemos jugar con el CSS para cambiar los colores, o talvez añadir algún efecto más, esto se los dejo a su imaginación.

En los ejemplos verán que el código HTML (Estructura) está separado del código CSS (Presentación o formato); esto nos ayuda a modificar rápidamente el código, ahorrar el ancho de banda, y otras cosas que no me acuerdo.

Usuarios que han visto este tema también han visto...

- Crear menus de navegación en CSS usando listas
- Qué son las capas
- Efectos en textos e imágenes con CSS
- Pseudoclases de CSS
- Arreglar los bordes punteados en Internet Explorer con CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento