How can I create a responsive menu for mobile devices using HTML?

<!-- BEGIN COPY / PASTE -->
    <nav>
      <button class="menu-toggle">☰</button>
      <ul class="menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    <style>
      .menu {
        display: none;
      }
      .menu-toggle {
        display: block;
      }
      @media (min-width: 600px) {
        .menu {
          display: block;
        }
        .menu-toggle {
          display: none;
        }
      }
    </style>
    <script>
      document.querySelector('.menu-toggle').addEventListener('click', function() {
        const menu = document.querySelector('.menu');
        menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
      });
    </script>
    <!-- END COPY / PASTE -->