Estoy tratando de crear una navegación lateral con HTML, CSS y Javascript. Pude crear la función para abrir y cerrar la navegación. El problema con el que me encuentro y que no noté hasta que agregué la imagen de fondo es que los enlaces aún aparecen aunque la navegación esté cerrada. Intenté mostrar: ninguno; tanto en el li como en los enlaces. Los resultados son que no aparecen enlaces y si intento visibilidad solo aparece el enlace Inicio. aquí está mi código

 <nav> <p class="brand">DreamJob</p> <div class="burger"> <div class="line"></div> </div> <ul class="ul-one"> <li class="li-one"><a href="#" class="links-one">Home</a></li> <li class="li-one"><a href="#" class="links-one">About</a></li> <li class="li-one"><a href="#" class="links-one">Contact</a></li> <li class="li-one"><a href="#" class="links-one">Feedback</a></li> <li class="li-one"><a href="#" class="links-one">Sign up</a></li> <li class="li-one"><a href="#" class="links-one">Sign in</a></li> </ul> </nav> nav .ul-one { position: absolute; right: 0; top: 90px; background-color: #111; width: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; transition: 0.5s ease-in-out; } nav .ul-one .li-one { margin: 10px 0px 10px 0px; z-index: 200; } nav .ul-one .li-one .links-one { color: #fff; font-size: 16px; font-family: karma; text-decoration: none; display: none; } function nav () { let burger = document.querySelector(".burger"); let ul = document.querySelector("ul-one"); let links = document.querySelector(".links-one"); let openNav = false; burger.addEventListener("click", () => { if (!openNav) { document.querySelector(".ul-one").style.width = "40%"; document.querySelector(".links-one").style.display ="block"; openNav = true; }else { document.querySelector(".ul-one").style.width = "0"; document.querySelector(".links-one").style.display ="none"; openNav = false; } }); } nav();