Tutorial: Menú con HTML y CSS

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.
[youtube https://www.youtube.com/watch?v=yB36v1gBZsA]
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>
Quizás te interese:  Cómo usar los estilos en secuencia de Indesign

Deja una respuesta