Estoy creando un sistema el cual contiene un menu de navegacion vertical con varios menus y submenus y cuando quiero que se despliguen las opciones del menu vertical con el hover, ya sean del menu o del submenu. el menu no quiere desplegarse para mostrar las demás opciones, he intentado de todo y aun no logro hacer que se visualicen las opciones correctamente, por que creen que ocurre esto? omiti el codigo de mi header y solo coloco el del menu de navegacion que es el que no funciona correctamente.
<div class="wrapper">
<nav>
<ul class="menu-area">
<li><a href=""><strong>Registro</strong> </a>
<ul>
<li><a href="">Estudiantes</a></li>
<li><a href="">Obreros</a></li>
</ul>
</li>
<li><a href=""><strong>Estudiantes</strong></a>
<ul>
<li><a href="">Agrupaciones</a>
<ul>
<li> <a href=#> Rock Sinfónico </a> </li>
<li> <a href=#> Camerata Yaracuy </a> </li>
</ul>
</li>
<li><a href="">Catedra</a>
<ul>
<li> <a href=#> Cátedra de Violín </a> </li>
<li> <a href=#> Cátedra de Viola </a> </li>
</ul>
</li>
<li><a href="">Formacion de adultos</a>
<ul>
<li> <a href=#> Piano </a> </li>
<li> <a href=#> Cuatro </a> </li>
</ul>
</li>
</ul>
</li>
<li><a href=""><strong>Obreros</strong></a>
<ul>
<li> <a href="">Administracion</a></li>
<li> <a href="">Docentes</a></li>
<li> <a href="">Limpieza</a></li>
</ul>
</li>
</ul>
</nav>
</div>
.wrapper{
position: relative;
margin: 0 auto;
padding: 50px 0;
clear: both;
}
.menu-area{
list-style: none;
padding: 0;
margin: 0;
background-color: aqua;
width: 250px;
}
.menu-area li{
position: relative;
}
.menu-area li a{
height: 36px;
position: relative;
border-bottom: 1px solid black;
display: block;
text-decoration: none;
padding: 12px 20px;
color: black;
}
.menu-area li a strong{
display: block;
text-transform: uppercase;
font-size: 2vw;
letter-spacing: 3px;
}
.menu-area li:hover > a{
color: grey;
}
.menu-area li ul,
.menu-area li ul li ul{
background: #262626;
opacity: 0;
visibility: hidden;
transition: 300ms;
z-index: 999;
left:280px;
top: 0;
list-style: none;
position: absolute;
height: auto;
min-width: 250px;
padding: 0;
margin: 0;
}
.menu-area li: hover > ul, .menu-area li ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
left: 250px;
}
.menu-area li ul li a {
text-transform: uppercase;
font-size: 2vw;
letter-spacing: 3px;
padding: 10px;
text-align: center;
border: 0;
border-bottom: 1px solid black;
height: auto;
}
.menu-area li ul li ul{
left: 230px ;
top: 0;
border: 0;
}