/* index.html */
<nav class="nav">
<ul class="menu">
<li class="menu-item"> <a class="menu-link" href="#"> Nosotros</a> </li>
<li class="menu-item"> <a class="menu-link" href="#"> Profesores</a> </li>
<li class="menu-item"> <a class="menu-link" href="#"> Cursos</a>
<ul class="menu submenu">
<li class="menu-item"> <a class="menu-link" href="#"> Programación</a> </li>
<li class="menu-item"> <a class="menu-link" href="#"> Diseño</a> </li>
<li class="menu-item"> <a class="menu-link" href="#"> Emprendimiento</a>
<ul class="menu submenu">
<li class="menu-item"> <a class="menu-link" href ="#"> Gestión de Proyectos WEB</a> </li>
<li class="menu-item"> <a class="menu-link" href ="#"> Taller de Emprendimiento</a> </li>
<ul class="menu submenu">
<li class="menu-item"> <a class="menu-link" href ="#"> Barcelona</a> </li>
<li class="menu-item"> <a class="menu-link" href ="#"> Real Madrid</a> </li>
</ul>
</ul>
</li>
</ul>
</li>
<li class="menu-item"> <a class="menu-link" href="#"> Blog</a> </li>
<li class="menu-item"> <a class="menu-link" href="#"> Suscríbete</a> </li>
</ul>
</nav>
</head>
/* estilos.css */
body { font-family: sans-serif; font-size: 1em; }
.menu {
list-style: none;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
display: flex;
background: #333;
}
.submenu { position: absolute; top: 100%; display: none; }
.menu-link { text-decoration: none; color: #ddd; display: block; padding: .5em 1em; }
.menu-item:hover { background: rgba(0,0,0,.5); }
.menu-item { position: relative; }
.menu-item:hover > .submenu { display: block; }
.submenu .submenu { left: 100%; top: 0; }
.menu-item { position: relative; }