Barra de Navegación a partir de lista no ordenada


¡CSS Válido! 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:


  1. Eliminar viñetas= list-style-type:none;
  2. Flotar elementos de la lista hacia la izquierda en forma vertical= float:left; width:150;
  3. Color de Fondo para los elementos de la lista= background-color:color;
  4. Tipo de letra para los elementos de la lista= font-family:"Trebuchets MS", Arial, Helvetica, sans-serift; font-size:22 px; color:white;
  5. Quitar el subrayado del enlace= text-decoration:none; y el marco=outline:none;
  6. Alinear el texto al centro= text-align:center;
  7. Separar los elementos de la barra de navegación= margin:2px;
  8. Borde redondeado= border-radius:15 px;
  9. Efecto al borde= border-bottom-style:outset;
  10. Poner efecto al poner el mouse encima= ul li:hover{ background-color:red;}

Ejemplo: