Saltar al contenido principal

Ejercicio CSS: Barra de navegación con css

Crea una barra de navegación horizontal con enlaces que cambian de color cuando se pasa el ratón por encima de ellos.

Solución interactiva​

Logo DivZone de ad link
Plataforma IAConvierte el código en clientes.Pruébalo gratis

Solución con el código HTML y CSS completo​

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Ejercicio 1</title>
    <style>
      /* Escribe tu CSS aquí */
      nav {
        background-color: #333;
        overflow: hidden;
      }

      nav a {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      nav a:hover {
        background-color: #ddd;
        color: black;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#home">Home</a>
      <a href="#services">Services</a>
      <a href="#contact">Contact</a>
    </nav>
  </body>
</html>
Practica con DivZone AI

¿Tu barra de navegación ya funciona? Crea una landing page con DivZone AI y observa cómo estiliza el menú y sus estados :hover.

info

🔎 Revisa las siguientes secciones donde econtrarás más información sobre este tema: