Tutorial: Menú con HTML y CSS

Posted on

Después de mucho tiempo por fin puedo realizar un nuevo video tutorial en donde explico a realizar un menú con opciones desplegables (o submenú) partiendo de una lista. Si sabes algo de CSS podrás personalizar este menú para tus diseños.

Si sigues leyendo podrás ver el código utilizado.

texto<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<style type="text/css">
nav{
 width:800px;
 left:20px;
 z-index:10;
 }
nav ul{
 margin:0px;
 padding:0px;
 }
nav ul li{
 display:block;
 float:left;
 height:35px;
 margin-right:5px;
 background-color:yellow;
 position:relative;
 transition:background-color 500ms ease-out;
 }
nav ul li:hover{
 background-color:#F90;
 }
nav ul li a{
 display:block;
 padding:10px 20px;
 color:black;
 text-decoration:none;
 font-size:0.9em;
 text-transform:uppercase;
 }
nav ul li ul{
 position:absolute;
 display:none;
 top:35px;}
nav ul li ul li{
 background-color:#F90;
 width:160px;
 margin-top:1px;
 }
nav ul li:hover ul{
 display:block;
 }
nav ul li ul li:hover{
 background-color:yellow;
 }
</style>

</head>

<body>
<nav>
<ul>
 <li><a href="#">Inicio</a></li>
 <li><a href="#">Acerca de mi</a></li>
 <li><a href="#">Portafolio</a>
<ul>
 <li><a href="#">Ilustraciones</a></li>
 <li><a href="#">Web</a></li>
 <li><a href="#">Afiches</a></li>
</ul>
 </li>
 <li><a href="#">Curriculum</a></li>
 <li><a href="#">Contacto</a></li>
</ul>
</nav>
</body>
</html>
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s