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.