<button id="lang-menu-open">Open</button>
<ul class="lang-menu visually-hidden">
  <li><a href="/english">English</a></li>
  <li><a href="/spanish">Español</a></li>
  <li><a href="/french">Français</a></li>
  <li><a href="/arabic">عربى</a></li>
  <li><a href="/portuguese">Português</a></li>
</ul>
.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}
const langButton = document.getElementById('lang-menu-open')

const langMenu = document.querySelector('.lang-menu')

langButton.addEventListener('click', () => langMenu.classList.toggle('visually-hidden'))

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.