Este documento describe cómo crear un menú desplegable utilizando HTML y CSS. Define las etiquetas y propiedades CSS necesarias para crear una lista de navegación con submenús, incluyendo <ul>, <li>, :hover, position y display. Explica cómo agregar estilos a los elementos del menú y cómo mostrar y ocultar los submenús al pasar el puntero sobre ellos.
Arquitectura Ecléctica e Historicista en Latinoamérica.pdf
Menu css
1. <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Menu desplegable</title>
<style type="text/css">
* {padding:0px;
margin:0px;}
#header {margin:auto; width:500px; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif }
ul, ol´{list-style:none
}
.nav li a { background-color:#000000;
color:#f;
text-decoration:none;
padding:10px 15px; display:block
}
.nav li a:hover {background-color:#434343}
.nav li {oat: left;}
.nav li ul {display:none; position:absolute; min-width:140px
}
.nav li:hover ul {display:block}
.nav li ul li {position:relative;}
.nav li ul li ul {right:-140px;
top:0px}
/style
/head
body
div id=header
ul class=nav
lia href=inicio/a/li
lia href=portafolio/a
ullia href=submenu1/aullia href=submenu1.1/a/li/ul/li/ul
lia href=contacto/a/li
/ul
/div
/body
/html
La etiqueta style define hojas
de estilo para el documento
actual.
Esta etiqueta debe ser ubicada en
la cabecera del documento.
La propiedad padding se utiliza para
definir el ancho del espacio que se
encuentra entre el elemento y el
borde del mismo.
Esta propiedad define el ancho para
los cuatro lados de la caja.
La etiqueta ul se utiliza para crear una lista
desordenada.
Las listas desordenadas se representan con
los siguientes símbolos:
disc(círculo relleno)
circle(círculo vacío)
square(cuadrado vacío)
Los diferentes objetos de las listas se
representan con la etiqueta li.
La etiqueta div se utiliza para
definir una sección dentro del
documento.
Esta etiqueta se usa
comunmente para agrupar un
bloque de elementos, para
luego añadirle un estilo
determinado.
Sintaxis
selector{propiedad:valor}
Elemento de navegación
:hover, se activa cuando el usuario pasa el
ratón o cualquier otro elemento apuntador
por encima de un elemento.
Menu
CSS