SlideShare a Scribd company logo
1 of 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:#fff; 
text-decoration:none; padding:10px 15px; display:block 
} 
.nav li a:hover {background-color:#434343} .nav > li {float: 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"> <li><a href="">inicio</a></li> 
<li><a href="">portafolio</a> <ul><li><a href="">submenu1</a><ul><li><a 
href="">submenu1.1</a></li></ul></li></ul> <li><a 
href="">contacto</a></li> </ul> </div> </body> </html>

More Related Content

What's hot

What's hot (11)

Bootstrap Html5 Cart
Bootstrap Html5 CartBootstrap Html5 Cart
Bootstrap Html5 Cart
 
Práctica
PrácticaPráctica
Práctica
 
Form Script
Form ScriptForm Script
Form Script
 
Simple flat ui css accordion
Simple flat ui css accordionSimple flat ui css accordion
Simple flat ui css accordion
 
Crea un tema compatibile con le ultime novità WordPress
Crea un tema compatibile con le ultime novità WordPressCrea un tema compatibile con le ultime novità WordPress
Crea un tema compatibile con le ultime novità WordPress
 
Html
HtmlHtml
Html
 
Freddy,teto,chino,jhovany
Freddy,teto,chino,jhovanyFreddy,teto,chino,jhovany
Freddy,teto,chino,jhovany
 
The State of Web Components
The State of Web ComponentsThe State of Web Components
The State of Web Components
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Trabajo
TrabajoTrabajo
Trabajo
 
Motd
MotdMotd
Motd
 

Viewers also liked (15)

Estructuras basicas
Estructuras basicasEstructuras basicas
Estructuras basicas
 
Ejercicio
Ejercicio Ejercicio
Ejercicio
 
Css1
Css1Css1
Css1
 
Menu css
Menu cssMenu css
Menu css
 
Html
HtmlHtml
Html
 
Barra social
Barra socialBarra social
Barra social
 
Css 3
Css 3Css 3
Css 3
 
Marca
MarcaMarca
Marca
 
Ejercicio
EjercicioEjercicio
Ejercicio
 
Maqueta
MaquetaMaqueta
Maqueta
 
Estructura
EstructuraEstructura
Estructura
 
Ejercicio
EjercicioEjercicio
Ejercicio
 
Css intro
Css introCss intro
Css intro
 
Etiquetas
EtiquetasEtiquetas
Etiquetas
 
Listas
ListasListas
Listas
 

More from Abdel Suarez

More from Abdel Suarez (16)

Dibujando art droid pc
Dibujando  art droid pcDibujando  art droid pc
Dibujando art droid pc
 
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 2
Css 2Css 2
Css 2
 
Css
CssCss
Css
 
Ejercicio
EjercicioEjercicio
Ejercicio
 
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
 
Positivo negativo
Positivo negativoPositivo negativo
Positivo negativo
 
Interrelaciondeformas 130912083748-phpapp01
Interrelaciondeformas 130912083748-phpapp01Interrelaciondeformas 130912083748-phpapp01
Interrelaciondeformas 130912083748-phpapp01
 
Listas
ListasListas
Listas
 
Metzcine
MetzcineMetzcine
Metzcine
 

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:#fff; text-decoration:none; padding:10px 15px; display:block } .nav li a:hover {background-color:#434343} .nav > li {float: 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"> <li><a href="">inicio</a></li> <li><a href="">portafolio</a> <ul><li><a href="">submenu1</a><ul><li><a href="">submenu1.1</a></li></ul></li></ul> <li><a href="">contacto</a></li> </ul> </div> </body> </html>