Inicio
Comentar
Imágenes
Webgae
Aprenda a crear un menú de subnavegación con CSS.
HTML
Home
About ⇓
Company
Team
Careers
Services ⇓
Bring
Deliver
Package
Express
Partners ⇓
Link 1
Link 2
Link 3
Link 4
Contact
Menú subnav / desplegable dentro de una barra de navegación
Desplácese sobre el enlace "acerca de", "servicios" o "socios" para ver el submenú de navegación.
CSS
body { font-family: Arial, Helvetica, sans-serif; margin: 0; } .navbar { overflow: hidden; background-color: #333; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .subnav { float: left; overflow: hidden; } .subnav .subnavbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .subnav:hover .subnavbtn { background-color: red; } .subnav-content { display: none; position: absolute; left: 0; background-color: red; width: 100%; z-index: 1; } .subnav-content a { float: left; color: white; text-decoration: none; } .subnav-content a:hover { background-color: #eee; color: black; } .subnav:hover .subnav-content { display: block; }
JavaScript
Puede cambiar código para ver el resultado
Resultado ↓
No hay comentarios:
Publicar un comentario
Entrada más reciente
Entrada antigua
Inicio
Suscribirse a:
Enviar comentarios (Atom)
No hay comentarios:
Publicar un comentario