Construcc
ión de Docente: Víctor M. González Camacho
Páginas
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Listas anidadas como menú</title>
<style>
#cabeza {
position: fixed;
top: 0;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
z-index: 1000;
}
ul, ol {
list-style:none;
padding: 0;
margin: 0;
}
.listaprincipal {
display: flex;
justify-content: center; /* Centra los elementos
horizontalmente */
align-items: center; /* Centra los elementos
verticalmente */
}
.listaprincipal > li {
float:left;
margin-right: 10px;
position: relative; /* Asegura que los submenús se
posicionen correctamente */
text-align: center;
}
.listaprincipal > li {
float:left;
margin-right: 10px;
position: relative; /* Asegura que los submenús se
posicionen correctamente */
text-align: center;
}
.listaprincipal li a {
1
Construcc
ión de Docente: Víctor M. González Camacho
Páginas
color:#fff;
text-decoration:none;
padding:10px 12px;
display:block;
border-radius: 5px;
text-align: center;
}
.listaprincipal li ul {
display:none;
position:absolute;
min-width:140px;
top: 100%; /* Asegura que el submenú aparezca debajo
del elemento principal */
left: 0; /* Alinea el submenú con el borde izquierdo
del elemento principal */
background-color: #333; /* Añade un fondo para los
submenús */
}
.listaprincipal li:hover > ul {
display:block;
}
.listaprincipal li ul li {
position:relative;
}
.listaprincipal li ul li ul {
right:-140px;
top:0px;
}
.botongradiente{
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
background: linear-gradient(#ffb013,#333);
}
</style>
Estructura del CSS
1. Selectores de Clase y ID:
o #cabeza: El símbolo # se usa para seleccionar un elemento con un
ID específico. En este caso, #cabeza se refiere a un elemento con
el atributo id="cabeza". Los ID son únicos en una página, lo que
significa que solo debe haber un elemento con ese ID.
o .listaprincipal: El símbolo . se utiliza para seleccionar un
elemento con una clase específica. Aquí, .listaprincipal se
refiere a cualquier elemento HTML que tenga la
clase listaprincipal. A diferencia de los ID, varias etiquetas
pueden compartir la misma clase.
2. Selectores Adicionales:
2
Construcc
ión de Docente: Víctor M. González Camacho
Páginas
o .listaprincipal > li: Este selector utiliza el operador > que
indica relación directa entre elementos. En este caso, selecciona
todos los elementos li que son hijos directos de un elemento con
la clase listaprincipal. Los hijos directos son aquellos que están
inmediatamente dentro del elemento padre.
Estilos CSS Específicos
1. #cabeza:
o Establece un fondo verde (background-color: #4CAF50) y texto
blanco (color: white).
o Se fija en la parte superior de la ventana del navegador ( position:
fixed; top: 0;) y ocupa todo el ancho (width: 100%).
2. ul, ol:
o Elimina los puntos de las listas (list-style: none;), y también
establece márgenes y rellenos a cero para que no haya espacio
adicional en la lista.
3. .listaprincipal > li:
o Cada elemento de la lista principal se alinea horizontalmente
(float: left) y se les aplica margin para darles espacio entre sí.
4. .listaprincipal li a:
o Establece el estilo de los enlaces en la lista, incluyendo color,
decoración, relleno, y esquinas redondeadas.
5. .listaprincipal li ul:
o Configura los submenús para que estén ocultos por defecto
(display: none), y los posiciona de manera absoluta debajo del
elemento padre.
6. .listaprincipal li:hover > ul:
o Muestra el submenú cuando el mouse se coloca sobre el elemento
de la lista (hover).
7. .listaprincipal li ul li:
o Indica que cada elemento de los submenús también es relativo, lo
que ayuda a las posiciones de los submenús secundarios más
profundos.
8. .listaprincipal li ul li ul:
o Posiciona los submenús de tercer nivel para que aparezcan a la
derecha de su elemento padre.
9. .botongradiente:
o Agrega esquinas redondeadas y un fondo de degradado al botón,
lo que mejora su apariencia visual.
Resumen
Los selectores como # y . permiten aplicar estilos de manera específica a
elementos únicos o grupos múltiples.
El uso de > define la relación entre los elementos, y esto es
especialmente útil para manejar la jerarquía de los menús anidados.
Los estilos configurados aseguran que el menú tenga una apariencia y
comportamiento deseados, mejorando la experiencia del usuario al
interactuar con la página
</head>
3
Construcc
ión de Docente: Víctor M. González Camacho
Páginas
<body>
<header>
<div id="cabeza">
<ul class="listaprincipal">
<li><a href=""
class="botongradiente">Inicio</a></li>
<li><a href=""
class="botongradiente">Productos</a>
<ul>
<li><a href="">Ordenadores</a></li>
<li><a href="">Moviles</a></li>
<li><a href="">Tablet</a></li>
<li><a href="">Consumibles</a>
<ul>
<li><a href="">Tinta</a></li>
<li><a href="">DVD</a></li>
<li><a href="">CD</a></li>
<li><a href="">Memorias</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=""
class="botongradiente">Servicios</a>
<ul>
<li><a href="">Diseño web</a></li>
<li><a href="">Desarrollo móvil</a></li>
<li><a href="">Servicio técnico</a></li>
<li><a href="">Formación</a></li>
</ul>
</li>
<li><a href=""
class="botongradiente">Contacto</a></li>
</ul>
</div>
</header>
</body>
</html>
Estructura del HTML
1. <!DOCTYPE html>:
o Esta declaración se utiliza al inicio de un documento HTML
para especificar el tipo de documento. Indica a los
navegadores que este documento es un documento
HTML5.
2. <html lang="es">:
4
Construcc
ión de Docente: Víctor M. González Camacho
Páginas
oLa etiqueta <html> es el contenedor raíz de un documento
HTML. El atributo lang="es" indica que el contenido de la
página está en español. Esto es útil para los motores de
búsqueda y para la accesibilidad.
3. <head>:
o La etiqueta <head> contiene metadatos sobre el
documento, que no se muestran directamente en la parte
visible de la página.
4. <meta charset="UTF-8">:
o Esta metaetiqueta establece la codificación de caracteres
en UTF-8, que permite representar una amplia gama de
caracteres y símbolos de diferentes idiomas. Es esencial
para que el texto se muestre correctamente.
5. <meta name="viewport" content="width=device-width, initial-
scale=1.0">:
o Esta etiqueta es crucial para la responsividad. Define
cómo se debe escalar la página en dispositivos móviles. El
valor width=device-width intenta optimizar el ancho para el
dispositivo en el que se visualiza, y initial-
scale=1.0 establece el nivel de zoom inicial.
6. <title>Listas anidadas como menú</title>:
o La etiqueta <title> define el título de la página que
aparece en la pestaña del navegador. Este es el texto que
se mostrará cuando los usuarios busquen tu página.
7. <style>:
o Dentro de esta etiqueta, se incluye el CSS que define el
estilo visual y el diseño de la página. El CSS se puede
incluir aquí o en un archivo separado, pero en este caso
está incrustado directamente.
8. <body>:
o La etiqueta <body> contiene todo el contenido visible de la
página, incluyendo texto, imágenes, enlaces,
encabezados, etc.
9. <header>:
o Esta etiqueta define el encabezado de un documento o
sección. Suelen incluir elementos como logotipos, títulos y
menús de navegación.
10. <div id="cabeza">:
o Un <div> es un contenedor genérico utilizado para agrupar
elementos y aplicarles estilos.
Aquí, id="cabeza" proporciona un identificador único para
el encabezado, lo que permite aplicar estilos específicos
relacionados con este elemento.
11. <ul class="listaprincipal">:
o Esta etiqueta <ul> define una lista desordenada (con
viñetas) y class="listaprincipal" le asigna la
clase listaprincipal, que permite aplicar estilos específicos
a esta lista. Esta lista contiene los elementos principales
del menú.
5
Construcc
ión de Docente: Víctor M. González Camacho
Páginas
12. <li>:
o Cada <li> representa un elemento de la lista. En este
caso, representan los diferentes elementos del menú.
o Dentro de algunos <li>, hay elementos <ul> adicionales
que crean submenús, permitiendo la estructura
jerárquica.
13. <a href="">:
o La etiqueta <a> define un enlace. El
atributo href especifica la URL a la que se dirigirá el
enlace. Aquí las URLs están vacías, lo que significa que los
enlaces no llevan a ninguna parte en el código
proporcionado.
14. Submenús (<ul>) anidados:
o Los submenús son listados dentro de elementos li que
también tienen su propio <ul>, lo que permite crear un
menú desplegable. Cada submenú puede tener su propia
lista de ítems, creando niveles adicionales de navegación.
15. </header> y </body>:
o Estas etiquetas cierran el <header> y el <body>, indicando el
fin de esas secciones.
16. </html>:
o Finalmente, esta etiqueta cierra el documento HTML.
Resumen
La estructura HTML proporciona el esqueleto de tu página web,
organizando el contenido en secciones claras como
encabezados, listas y enlaces.
Los identificadores y las clases ofrecen maneras de aplicar
estilos específicos mediante CSS y de mantener un formato
consistente.
Las listas anidadas en la navegación permiten una jerarquía
clara, lo que facilita la agrupación de elementos relacionados,
como productos y servicios.
