Barra de Navegación a partir de lista no ordenada
Servicio de Validación HTML5
Se pude implementar una barra de navegación mediante una lista no ordenada de elementos, ademas se deben aplicar varias reglas CSS:
- Eliminar viñetas= list-style-type:none;
- Flotar elementos de la lista hacia la izquierda en forma vertical= float:left; width:150;
- Color de Fondo para los elementos de la lista= background-color:color;
- Tipo de letra para los elementos de la lista= font-family:"Trebuchets MS", Arial, Helvetica, sans-serift; font-size:22 px; color:white;
- Quitar el subrayado del enlace= text-decoration:none; y el marco=outline:none;
- Alinear el texto al centro= text-align:center;
- Separar los elementos de la barra de navegación= margin:2px;
- Borde redondeado= border-radius:15 px;
- Efecto al borde= border-bottom-style:outset;
- Poner efecto al poner el mouse encima= ul li:hover{ background-color:red;}
Ejemplo: