Ya sea que su menú de navegación sea una fila horizontal en la parte superior o una fila vertical en el lateral, sigue siendo sólo una lista. Al diseñar la navegación web, a menudo es fácil olvidar que un menú de navegación es sólo un grupo glorificado de enlaces. Pero si programa su navegación usando XHTML+CSS, puede crear un menú que sea pequeño para descargar (el XHTML) y fácil de personalizar (el CSS).

Introducción

Para empezar a diseñar una lista para la navegación, debe utilizar una lista. Puede ser una lista estándar desordenada que ha sido identificada como la navegación:

ul>
Home/i> Home/i>  / i> / i> / i> / i>. / i> 
Si se fija bien en el HTML, notará que el enlace "Home" también tiene un ID de
youarehere. Esto le permitirá crear un menú que identifica la ubicación actual de sus lectores. Incluso si usted no planea tener ese tipo de señal visual en su sitio ahora mismo, puede incluir esa información. Si decide añadir el taco más tarde, tendrá menos codificación para preparar su sitio.
Sin ningún estilo CSS, este menú XHTML parece una lista estándar desordenada. Hay viñetas y los elementos de la lista están ligeramente sangrados. Debido a que estoy usando enlaces de marcadores de posición, la mayoría de los navegadores no mostrarán los enlaces como clickeables (subrayados y en azul). Si pega el HTML de arriba en una página Web, su navegación se verá así:

Inicio
Productos
Servicios
Contáctenos

Esto es bastante aburrido y no se parece mucho a un menú. Pero con sólo unos pocos estilos de CSS añadidos a la lista, puede crear un menú que le enorgullezca.
  Menú de navegación vertical
Un menú de navegación vertical es muy fácil de escribir porque se muestra de la misma manera que una lista normal: arriba y abajo. Los elementos de la lista se muestran verticalmente a lo largo de la página.
Cuando estoy diseñando los menús, me gusta empezar por fuera y trabajar en ellos. Con esto, quiero decir que primero me pongo el estilo
ul#navigation
 y luego pasar a los elementos 
li
 y luego a los enlaces, etc. Así que para este menú, primero se define el ancho del menú. Esto asegurará que incluso si los elementos del menú son largos, no empujarán el resto del diseño ni causarán desplazamiento horizontal. ul#navigation { width: 12em; } >
Una vez que tengo el ancho establecido, puedo jugar con los elementos de la lista. Esto me permite establecer cosas como (para deshacerme de las viñetas), colores de fondo, bordes, alineación de texto y márgenes.
ul#navigation li {
estilo lista: ninguno;
color de fondo: #039;
border-top: sólido 1px #039;
text-align: izquierda;
margen: 0;
} 
> } } } } } } } } } } } } }
Una vez que haya establecido los elementos básicos de la lista, puede empezar a jugar con el aspecto del menú en el área de enlaces. Primero estilice el
UL#navigation LI A 
 y luego el 
A:link
, 
A:visited
, 
A:hover
, y 
A:active
 (si los desea). Para los enlaces, me gusta hacer de los enlaces un elemento de bloque (en lugar del elemento predeterminado en línea). Esto les obliga a ocupar todo el espacio del 
LI
 y actúan más como un párrafo, lo que hace que sean más fáciles de estilizar como botones de menú. La otra cosa que siempre hago es quitar el subrayado (
decoración de texto: ninguno;
), ya que esto hace que los botones se parezcan más a botones para mí. Pero por supuesto, su diseño puede ser diferente. 
ul#navigation li a {
visualización: bloque;
> bloquetexto-decoración: ninguno;
acolchado: .25em;
fondo del borde: sólido 1px #39f;
border-right: sólido 1px #39f;
} 
> } } } } } } } } } } } } }
Observe que con el
display: block; en los enlaces, se puede hacer clic en toda la caja del elemento de menú, no sólo en las letras. Esto también es bueno para la usabilidad. Asegúrese de establecer los colores de los enlaces (enlace, visitado, flotante y activo) si desea que sean diferentes de los colores por defecto azul, rojo y púrpura. a:link, a:visited { color: #fff; }
a:hover, a:active { color: #000; } >
También me gusta darle un poco más de atención al estado de flotación cambiando el color de fondo.
 a:hover { color de fondo: #fff; } >
Si desea más ejemplos de menús verticales, consulte la siguiente lista.

Un menú vertical con estilo
Una plantilla de menú vertical básica
Un menú vertical con estilo con usted está aquí
Una plantilla de menú vertical básica con usted está aquí

  Menú de navegación horizontal
La creación de menús de navegación horizontales es un poco más difícil que la creación de menús de navegación verticales, ya que hay que compensar el hecho de que las listas HTML prefieren mostrarlas verticalmente. Al igual que con el menú horizontal, primero cree su lista del menú de navegación:

ul>
Home/i> Home/i>  / i> / i> / i> / i>. / i> Para crear un menú horizontal, trabaje de la misma manera que lo hizo con el menú vertical. Empieza por fuera y trabaja dentro. Como quiero que mi navegación comience en la esquina izquierda, la configuro con 0 margen izquierdo y relleno, y la floto hacia la izquierda. También debería acostumbrarse a fijar el ancho para que su menú no ocupe más o menos espacio del que usted desea. En el caso de los menús horizontales, suele ser el ancho total del diseño. También agregué un color de fondo a toda la lista para que sea más fácil de leer.
 ul#navegación {
>.float: izquierda;
margen: 0;
acolchado: 0;
ancho: 100%;
color de fondo: #039;
}
>
Pero el secreto del menú de navegación horizontal está en los elementos de la lista. Los elementos de la lista son normalmente elementos de bloqueo, lo que significa que tendrán una nueva línea antes y después de cada uno de ellos. Cambiando la pantalla de
block a 
inline
, se fuerza a los elementos de la lista a alinearse horizontalmente. 
ul#navigation li { display: inline; }
Traté los enlaces exactamente igual que los traté en el menú de navegación vertical, con los mismos colores y decoración de texto. Añadí un borde superior para delinear los botones cuando se cierran. Lo único que se ha eliminado es el
display: block; ya que esto volverá a colocar las nuevas líneas y destruirá el menú horizontal. 
ul#navigation li a {
texto-decoración: ninguno;
acolchado: .25em 1em;
fondo del borde: sólido 1px #39f;
border-top: sólido 1px #39f;
border-right: sólido 1px #39f;
}
a:link, a:visited { color: #fff; }
ul#navigation li a:hover {
color de fondo: #fff;
color: #000;
}
>
  Usted está aquí Información de ubicación
Otro aspecto de HTML es el identificador
youarehere. Si desea modificar su menú para indicar la ubicación actual de sus usuarios, simplemente use esto
ID
 para definir un color de fondo diferente u otro estilo. Mueva ese atributo 
ID
 al elemento de menú correcto en otras páginas para que la página actual esté siempre resaltada. ul#navigation li#youarehere a { color de fondo: #09f; } >
Si usted pone estos estilos juntos en su página, puede crear una barra de menú horizontal o vertical que funcione con su sitio pero que sea rápida de descargar y muy fácil de actualizar en el futuro. El uso de XHTML+CSS convierte sus listas en una herramienta muy poderosa para el diseño.
Si desea más ejemplos de menús horizontales, consulte lo siguiente.

Un menú horizontal con estilo
Una plantilla de menú horizontal básica
Un menú horizontal con estilo con usted está aquí
Una plantilla de menú horizontal básica con usted está aquí