¿Qué son las barras de navegación?

Piénsalo: tu navegación es, en realidad, una lista no ordenada de enlaces.

Márcalos dentro de las etiquetas <ul>.

Barras de navegación horizontales

Podemos utilizar CSS para controlar la manera en que se exhiben estas listas en nuestras páginas.

Si utilizamos display:inline, podemos crear barras de navegación horizontales.

Aquí está el código para esta barra de navegación:

ul {
margin-top: 1em;
margin-bottom: 0.5em;
}

#nav1 ul {
background-color: silver;
text-align: center;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid gray
}

#nav1 li {
list-style-type: none;
padding: 0.25em 1em;
border-left: 1px solid white;
display: inline
}

#nav1 li:first-child {
border: none;
}

Barras de navegación verticales

Aquí está el código para esta barra de navegación:

#nav2 {
background-color: silver;
border: solid 1px gray;
width: 8em
}

#nav2 ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}

#nav2 li {
margin: 0;
padding: 0.25em 0.5em 0.25em 1em;
border-top: 1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li {
width: auto;
}

#nav2 li:first-child {
border: none
}

Para obtener más información, consulta el artículo de Mark Newhouse, Taming Lists, en la lista "A List Apart", y Styling lists, en la wiki "CSS-Discuss"