A single html with css and some javascript code for give functionality to the menu bar and adapt the web to a responsive design.

For the web mobile design the menú bar change to a menu icon and is when start the functionality of the javascript code adding listeners to the items of the list, and take the control about how the design have to change when the window is rezized

    let menuItems = document.querySelectorAll('.desplegable');
    let elementClicked;

    document.querySelector('.menu-icon').addEventListener('click', () => {

        document.querySelector('.menu-icon').style.display = 'none';
        document.querySelector('nav ul').style.display = 'flex';
        document.querySelector('.close').style.display = 'block';

        for (const item of menuItems) {

            item.parentNode.addEventListener('click', (event) => {

                elementClicked = event.target;
               
                item.style.display = (item.style.display === 'block') ? 'none' : 'block';

            });
        }
        window.addEventListener('resize',function(){

            document.querySelector('.close').style.display = 'none';

            if (window.innerWidth > 601){
               

                document.querySelector('.menu-icon').style.display = 'none';
                document.querySelector('nav ul').style.display = 'flex';

                //podemos acceder a un elemento en questión sin iterar sobre todos los elementos.
                elementClicked.querySelector('.desplegable').style.display = 'none';


            }else{
                document.querySelector('.menu-icon').style.display = 'block';
                document.querySelector('nav ul').style.display = 'none';
            }
   
        })