Lección 9: Listas y Navegación en CSS

Introducción a las listas y navegación en CSS

Las listas y la navegación son componentes fundamentales en el diseño web. CSS nos permite estilizar estos elementos para crear menús atractivos y funcionales.

Tipos de listas en HTML

HTML ofrece tres tipos de listas:

• Listas no ordenadas (<ul>)
• Listas ordenadas (<ol>)
• Listas de definición (<dl>)

Para la navegación, generalmente usamos listas no ordenadas.

Estilizando listas para navegación

Para convertir una lista en una barra de navegación, podemos usar las siguientes propiedades CSS:

• list-style-type: none; para quitar los marcadores de lista
• display: flex; para alinear los elementos horizontalmente
• padding y margin para ajustar el espaciado

Creando menús desplegables

Para crear menús desplegables, usamos una combinación de CSS y HTML anidado:

• Usamos position: relative; en el elemento padre
• Y position: absolute; en el submenú
• Controlamos la visibilidad con display: none; y display: block;

Ejemplo interactivo

Vista Previa:

Ejercicio práctico

Crea una barra de navegación horizontal con al menos 4 elementos. Incluye un menú desplegable en uno de los elementos. Asegúrate de estilizar los enlaces para que cambien de color al pasar el mouse por encima.