SlideShare una empresa de Scribd logo
<!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

Más contenido relacionado

Similar a Menu css (20)

Julissarodriguezvilca
JulissarodriguezvilcaJulissarodriguezvilca
Julissarodriguezvilca
 
PROGRAMA CCS.docx
PROGRAMA CCS.docxPROGRAMA CCS.docx
PROGRAMA CCS.docx
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Wooldrige
WooldrigeWooldrige
Wooldrige
 
Practica de html5 y css3
Practica de html5 y css3Practica de html5 y css3
Practica de html5 y css3
 
Presentación CSS y HTML en Gummurcia
Presentación CSS y HTML en GummurciaPresentación CSS y HTML en Gummurcia
Presentación CSS y HTML en Gummurcia
 
Intro a Sass
Intro a Sass Intro a Sass
Intro a Sass
 
Etilos
Etilos Etilos
Etilos
 
Laboratorio 03
Laboratorio 03Laboratorio 03
Laboratorio 03
 
Curso De Css
Curso De CssCurso De Css
Curso De Css
 
Html y css
Html y cssHtml y css
Html y css
 
DiseñO Web Taller 3
DiseñO Web   Taller 3DiseñO Web   Taller 3
DiseñO Web Taller 3
 
listas HTML
listas HTMLlistas HTML
listas HTML
 
CSS
CSSCSS
CSS
 
rosario
rosariorosario
rosario
 
ccs
ccsccs
ccs
 
Taller multimedia
Taller multimediaTaller multimedia
Taller multimedia
 
Etiquetas en HTML
Etiquetas en HTMLEtiquetas en HTML
Etiquetas en HTML
 
Etiquetas html 2
Etiquetas html 2Etiquetas html 2
Etiquetas html 2
 
Etiquetas en html
Etiquetas en htmlEtiquetas en html
Etiquetas en html
 

Más de Abdel Suarez (20)

Dibujando art droid pc
Dibujando  art droid pcDibujando  art droid pc
Dibujando art droid pc
 
Barra social
Barra socialBarra social
Barra social
 
Typo
TypoTypo
Typo
 
La publicidad
La publicidadLa publicidad
La publicidad
 
Presentación proyecto integrador
Presentación proyecto integradorPresentación proyecto integrador
Presentación proyecto integrador
 
Creatividad
CreatividadCreatividad
Creatividad
 
Comunicación (Doc de la U. Nacional)
Comunicación (Doc de la U. Nacional)Comunicación (Doc de la U. Nacional)
Comunicación (Doc de la U. Nacional)
 
Comunicación
ComunicaciónComunicación
Comunicación
 
Css 3
Css 3Css 3
Css 3
 
Css 2
Css 2Css 2
Css 2
 
Css
CssCss
Css
 
Maqueta
MaquetaMaqueta
Maqueta
 
Ejercicio
EjercicioEjercicio
Ejercicio
 
Ejercicio
EjercicioEjercicio
Ejercicio
 
Ejercicio
EjercicioEjercicio
Ejercicio
 
Css intro
Css introCss intro
Css intro
 
Visual marca
Visual marcaVisual marca
Visual marca
 
Diseño Básico Fundamentos
Diseño Básico FundamentosDiseño Básico Fundamentos
Diseño Básico Fundamentos
 
Estructura
EstructuraEstructura
Estructura
 
Positivo negativo
Positivo negativoPositivo negativo
Positivo negativo
 

Último

CUADROSINOPTICOPAOLAPEREZARQUITECTURABARROCA.pdf
CUADROSINOPTICOPAOLAPEREZARQUITECTURABARROCA.pdfCUADROSINOPTICOPAOLAPEREZARQUITECTURABARROCA.pdf
CUADROSINOPTICOPAOLAPEREZARQUITECTURABARROCA.pdfPaola575380
 
Presentacion credito hipotecario y libre inversion.pdf
Presentacion credito hipotecario y libre inversion.pdfPresentacion credito hipotecario y libre inversion.pdf
Presentacion credito hipotecario y libre inversion.pdfsebaspenaf6
 
Eclecticismo en Arquitectura. Jennifer Rodriguez F.pdf
Eclecticismo en Arquitectura. Jennifer Rodriguez F.pdfEclecticismo en Arquitectura. Jennifer Rodriguez F.pdf
Eclecticismo en Arquitectura. Jennifer Rodriguez F.pdfJennifer436518
 
DIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en lineaDIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en lineaEduarRamos7
 
Calculo-de-calibres-de-conductores electricos.pptx
Calculo-de-calibres-de-conductores electricos.pptxCalculo-de-calibres-de-conductores electricos.pptx
Calculo-de-calibres-de-conductores electricos.pptxDavidGuevaraYanqui
 
Propuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseñoPropuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseñoMariano Salgado
 
Trabajo slides , mapa trabajo de sistema político
Trabajo slides , mapa trabajo de sistema políticoTrabajo slides , mapa trabajo de sistema político
Trabajo slides , mapa trabajo de sistema políticodkzrbgsm5t
 
ARQ BIZANTINA Y PALEOCRISTIANA .pptx
ARQ BIZANTINA Y PALEOCRISTIANA      .pptxARQ BIZANTINA Y PALEOCRISTIANA      .pptx
ARQ BIZANTINA Y PALEOCRISTIANA .pptxdnmxd1213
 
Planos y modelado con piezas en 3D con CAD
Planos y modelado con piezas en 3D con CADPlanos y modelado con piezas en 3D con CAD
Planos y modelado con piezas en 3D con CADAUTOCAD LIBRO
 
Sesión 02- Elaboramos sesiones de aprendizaje con CHATGPT - EL TECNOLÓGICO.pdf
Sesión 02- Elaboramos sesiones de aprendizaje con CHATGPT - EL TECNOLÓGICO.pdfSesión 02- Elaboramos sesiones de aprendizaje con CHATGPT - EL TECNOLÓGICO.pdf
Sesión 02- Elaboramos sesiones de aprendizaje con CHATGPT - EL TECNOLÓGICO.pdfchumpitazzchristian
 
DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA ENTRE EUROPA Y LAT...
DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA ENTRE EUROPA Y LAT...DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA ENTRE EUROPA Y LAT...
DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA ENTRE EUROPA Y LAT...GersonManuelRodrigue1
 
Patrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en CancunPatrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en CancunDianaArtemizaCP
 
La Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por KarinaLa Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por KarinaKarinaRodriguezG2
 
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdfInfografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdfsalazar1611ale
 
DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA EUROPEA Y LATINOAM...
DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA EUROPEA Y LATINOAM...DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA EUROPEA Y LATINOAM...
DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA EUROPEA Y LATINOAM...GersonManuelRodrigue1
 
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdfEstilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdfJosueJuanez1
 
ARQ BARROCA - ADRIANN DIAZ 30.118.599 ESC 41.pdf
ARQ BARROCA - ADRIANN DIAZ 30.118.599 ESC 41.pdfARQ BARROCA - ADRIANN DIAZ 30.118.599 ESC 41.pdf
ARQ BARROCA - ADRIANN DIAZ 30.118.599 ESC 41.pdfAdriannDiaz
 
Teoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintoresTeoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintoresEduardoGM8
 
juansolaruniversidaduptccreadrionegro.pptx
juansolaruniversidaduptccreadrionegro.pptxjuansolaruniversidaduptccreadrionegro.pptx
juansolaruniversidaduptccreadrionegro.pptxjuansanchez5210
 
Arquitectura Ecléctica e Historicista en Latinoamérica.pdf
Arquitectura Ecléctica e Historicista en Latinoamérica.pdfArquitectura Ecléctica e Historicista en Latinoamérica.pdf
Arquitectura Ecléctica e Historicista en Latinoamérica.pdfslaimenbarakat
 

Último (20)

CUADROSINOPTICOPAOLAPEREZARQUITECTURABARROCA.pdf
CUADROSINOPTICOPAOLAPEREZARQUITECTURABARROCA.pdfCUADROSINOPTICOPAOLAPEREZARQUITECTURABARROCA.pdf
CUADROSINOPTICOPAOLAPEREZARQUITECTURABARROCA.pdf
 
Presentacion credito hipotecario y libre inversion.pdf
Presentacion credito hipotecario y libre inversion.pdfPresentacion credito hipotecario y libre inversion.pdf
Presentacion credito hipotecario y libre inversion.pdf
 
Eclecticismo en Arquitectura. Jennifer Rodriguez F.pdf
Eclecticismo en Arquitectura. Jennifer Rodriguez F.pdfEclecticismo en Arquitectura. Jennifer Rodriguez F.pdf
Eclecticismo en Arquitectura. Jennifer Rodriguez F.pdf
 
DIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en lineaDIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en linea
 
Calculo-de-calibres-de-conductores electricos.pptx
Calculo-de-calibres-de-conductores electricos.pptxCalculo-de-calibres-de-conductores electricos.pptx
Calculo-de-calibres-de-conductores electricos.pptx
 
Propuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseñoPropuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseño
 
Trabajo slides , mapa trabajo de sistema político
Trabajo slides , mapa trabajo de sistema políticoTrabajo slides , mapa trabajo de sistema político
Trabajo slides , mapa trabajo de sistema político
 
ARQ BIZANTINA Y PALEOCRISTIANA .pptx
ARQ BIZANTINA Y PALEOCRISTIANA      .pptxARQ BIZANTINA Y PALEOCRISTIANA      .pptx
ARQ BIZANTINA Y PALEOCRISTIANA .pptx
 
Planos y modelado con piezas en 3D con CAD
Planos y modelado con piezas en 3D con CADPlanos y modelado con piezas en 3D con CAD
Planos y modelado con piezas en 3D con CAD
 
Sesión 02- Elaboramos sesiones de aprendizaje con CHATGPT - EL TECNOLÓGICO.pdf
Sesión 02- Elaboramos sesiones de aprendizaje con CHATGPT - EL TECNOLÓGICO.pdfSesión 02- Elaboramos sesiones de aprendizaje con CHATGPT - EL TECNOLÓGICO.pdf
Sesión 02- Elaboramos sesiones de aprendizaje con CHATGPT - EL TECNOLÓGICO.pdf
 
DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA ENTRE EUROPA Y LAT...
DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA ENTRE EUROPA Y LAT...DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA ENTRE EUROPA Y LAT...
DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA ENTRE EUROPA Y LAT...
 
Patrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en CancunPatrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en Cancun
 
La Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por KarinaLa Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por Karina
 
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdfInfografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
 
DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA EUROPEA Y LATINOAM...
DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA EUROPEA Y LATINOAM...DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA EUROPEA Y LATINOAM...
DIFERENCIAS ENTRE LA ARQUITECTURA ECLECTICA E HISTORICISTA EUROPEA Y LATINOAM...
 
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdfEstilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
 
ARQ BARROCA - ADRIANN DIAZ 30.118.599 ESC 41.pdf
ARQ BARROCA - ADRIANN DIAZ 30.118.599 ESC 41.pdfARQ BARROCA - ADRIANN DIAZ 30.118.599 ESC 41.pdf
ARQ BARROCA - ADRIANN DIAZ 30.118.599 ESC 41.pdf
 
Teoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintoresTeoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintores
 
juansolaruniversidaduptccreadrionegro.pptx
juansolaruniversidaduptccreadrionegro.pptxjuansolaruniversidaduptccreadrionegro.pptx
juansolaruniversidaduptccreadrionegro.pptx
 
Arquitectura Ecléctica e Historicista en Latinoamérica.pdf
Arquitectura Ecléctica e Historicista en Latinoamérica.pdfArquitectura Ecléctica e Historicista en Latinoamérica.pdf
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