Menú desplegable

HTML


<body>
    <nav class="navbar">
  <ul class="nav-links">
 
    <li><a href="#">Inicio</a></li>
   
    <li class="dropdown">
      <a href="#" class="dropbtn">Materias ▾</a>
      <ul class="dropdown-content">
        <li><a href="#">Matemáticas</a></li>
        <li><a href="#">Programación</a></li>
        <li><a href="#">Diseño UI</a></li>
      </ul>
    </li>

   </ul>
</nav>

</body> 




CSS


/* Estilos generales de la barra */

.navbar {
  background-color: #2c3e50;
  font-family: Arial, sans-serif;
}

.nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-links li {
  position: relative; /* Importante para posicionar el submenú */
}

.nav-links a {
  display: block;
  color: white;
  padding: 15px 20px;
  text-decoration: none;
}

/* --- Lógica del Desplegable --- */

/* 1. Esconder el contenido por defecto */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ecf0f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  list-style: none;
  padding: 0;
  z-index: 1;
}

/* 2. Estilo de los enlaces dentro del desplegable */
.dropdown-content a {
  color: #333;
  padding: 12px 16px;
}

.dropdown-content a:hover {
  background-color: #d1d8e0;
}

/* 3. MOSTRAR al pasar el mouse */
.dropdown:hover .dropdown-content {
  display: block;
}

.nav-links a:hover {
  background-color: #34495e;
}

Comentarios

Publicar un comentario

Entradas populares de este blog

Imagen
 CONCEPTOS BÁSICOS DE INTERNET  ¿Qué es INTERNET?  Internet es una gran red internacional de computadoras, es una red de redes. Internet nos permite, como todas las redes, compartir recursos. Es decir: mediante una computadora podemos, establecer una comunicación inmediata con cualquier parte del mundo para obtener información sobre un tema que nos interesa. De este modo se establecen vínculos comunicativos con millones de personas de todo el mundo, sea para fines académicos, de negocios, de investigación, o personales. Internet es una red que no sólo interconecta computadoras, sino que interconecta redes de computadoras entre sí. Una red de computadoras es un conjunto de máquinas, que se comunican a través de algún medio (cable coaxial, fibra óptica, radiofrecuencia, líneas telefónicas, etc.) con el objeto de compartir recursos. Concepto de WWW  El World-Wide Web (WWW) es un sistema hipermedia distribuido, accesible a través de Internet, que permite navegar con faci...
Leer más

Tablas y Frames, Flexbox y Grid

  1. Hojas de Estilo (CSS) 🎨 Una Hoja de Estilo en Cascada (CSS, del inglés Cascading Style Sheets ) es el lenguaje que describe la presentación de un documento escrito en un lenguaje de marcado, como HTML. Función y Principio Clave La función principal de CSS es separar el Contenido (estructurado en HTML) de la Presentación (el diseño, colores, fuentes, y disposición). Presentación: Define cómo se debe ver el contenido (ej., el texto principal debe ser azul, centrado y con fuente Arial ). Consistencia: Permite aplicar el mismo estilo a múltiples páginas web de un sitio, asegurando uniformidad visual con solo modificar un archivo. Eficiencia: Reduce el tamaño de los archivos HTML, haciendo que la página cargue más rápido. Tipos de Inclusión de CSS Externa: El método más recomendado. Los estilos se definen en un archivo separado ( .css ) y se vinculan al documento HTML. Interna: Los estilos se definen dentro de la sección <head> del documento HTML, utilizando la etiq...
Leer más

Navegadores (browsers)

 Un navegador web (o browser ) es el software esencial que permite a los usuarios acceder a la información disponible en la World Wide Web (WWW) . Actúa como un intérprete: solicita datos a los servidores web e interpreta el código (principalmente HTML, CSS y JavaScript) para mostrar las páginas de manera visual e interactiva en tu pantalla. Período Hitos Clave Principios de los 90 (Nacimiento) En 1990 , Tim Berners-Lee creó el primer navegador y editor, llamado WorldWideWeb (luego Nexus). En 1993 , apareció Mosaic , el primer navegador popular que mostraba imágenes y texto en la misma página, lo que impulsó el uso masivo de Internet. Mediados de los 90 (Guerra de Navegadores) En 1994 , se lanzó Netscape Navigator , que dominó el mercado inicial. En 1995 , Microsoft lanzó Internet Explorer (IE) . Siguió una intensa "Guerra de Navegadores" donde IE, al ser incluido en Windows, se convirtió en el dominante. Años 2000 (Renacimiento y Estándares) La caída de Netscape llevó a...
Leer más