ThakingEd

I'm working on a rwd site from a template that has a static menu, but i can't figure out how to "convert" it to a cascade "hoverable" style menu. Any help would be very appreciated. this is the CSS code im working with: (I manage to hide the sublinks but can´t make them reappear) #menu-bar { display: none;}header label { float: right; font-size: 25px; margin: -62px 0; cursor: pointer;}.menu { position: absolute; top:106px ; left:0; width: 100%; height: 100vh; background:rgba(50,51,50,0.9); transition: all 0.5s; transform:translateX(-100%); }.menu a { display:block; color: #fff; height: 50px; text-decoration: none; padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.5);}.menu a:hover { background:rgba(255,255,255,0.3); }#menu-bar:checked ~ .menu { transform: translateX(0%);}nav ul ul { display: none;} nav ul li:hover > ul { display: block; }@media (min-width:1024px) { .menu { position: static; width: auto; height: auto; transform:translateX(0%); float: right; display: flex; } .menu a { border: none; } header label { display: none; } } And this is the HTML code: (its for a spanish website) <nav class="menu"> <a href="INICIO.html">Inicio</a> <a href="NUESTRA_EMPRESA.html">Nuestra Empresa</a> <a href="PROYECTOS.html">Proyectos</a> <ul> <a href="SERVICIOS.html">Servicios</a> <ul> <li> <a href="#">instalaciones</a> <ul> <li><a href="#">eléctricas</a></li> <li><a href="#">mecánicas</a></li> </ul> </li> </ul> <ul> <li> <a href="#">estudios</a> <ul> <li><a href="#">termograficos</a></li> <li><a href="#">calidad de energia</a></li> </ul> </li> </ul> </ul> <a href="CONTACTO.html">Contacto</a> </nav> Thanks in advance.