Otro elemento interesante y frecuentemente utilizado son las barras de navegación horizontales, que generalmente están formadas por una lista de opciones de navegación. El código de la hoja de estilo de este ejemplo también ha sido extraído del sitio Minimalistic Design

Para crear una barra de navegación horizontal es necesario definir en primer lugar que el tipo de lista sea no ordenada (ul), que no presente ningún estilo, así como los márgenes y padding en 0 para facilitar la inserción de las etiquetas de ancla para los enlaces.

ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0}

A continuación se define la posición de cada uno de los elementos de la lista

ul#nav li{float:left;margin-left: 3px;text-align: center}

Y por último se definen los estilos de las pseudo-clases que determinarán el aspecto de las etiquetas anclas (enlaces)

ul#nav a{float:left;width: 95px;
padding: 5px 0;
background: #E7F1F8;
text-decoration:none;
color: #666;
border-top : 1px solid #fff;
border-left : 1px solid #fff;
border-right : 1px solid #fff;}

ul#nav a:hover{background: #fff;color: #000}

ul#nav li.activelink a,ul#nav li.activelink a:hover{background: #FFF;color: #003}

Para poder utilizar esta estructura en las páginas html será necesario:
(1) Asociar la hoja de estilo que contiene la definición de la distribución de las áreas de presentación en la cabecera de la página html. (En el ejemplo adjunto es recurso13.css).
En el cuerpo de la página html se deberá:
(2) Dentro del área de la cabecera delimitada por la etiqueta <div id="header">Añadir la etiqueta <div> identificada como "menu" como capa contenedora del listado de opciones de la barra de navegación definido por la hoja de estilo.
(3) Incluir el listado de opciones, utilizando la etiqueta <ul> identificada con el estilo definido es decir <ul id=nav"> y los correpondientes elementos del listado usando las etiquetas <li> </li>

Observe en el ejemplo adjunto, el resultado obtenido al utilizar esta estructura para el ejemplo desarrollado en la Actividad 1 del Tema HTML.
¿Qué operaciones serían oportunas realizar si necesita que la actual barra de navegación muestre 3 secciones más?