W3Schools Tryit Editor

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/6/w3.css">
<body class="w3-container">

<h2>Clickable Dropdown</h2>
<p>The <b>w3-dropdown-click</b> class creates a container for a click-controlled dropdown.</p>
<p>JavaScript adds or removes <b>w3-show</b> to display or hide the <b>w3-dropdown-content</b> panel.</p>
<p>Click the button to open or close the panel.</p>
<p>You can also focus the button with Tab and press Enter or Space, then Tab through the links.</p>
<p>Press Escape while focus is inside the dropdown to close it.</p>

<div class="w3-dropdown-click" onkeydown="if (event.key === 'Escape') closeDropdown()">
  <button id="dropdownButton" class="w3-button w3-teal" onclick="toggleDropdown()" aria-expanded="false" aria-controls="dropdown">Tutorials ▾</button>
  <div id="dropdown" class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">HTML</a>
    <a href="#" class="w3-bar-item w3-button">CSS</a>
    <a href="#" class="w3-bar-item w3-button">JavaScript</a>
  </div>
</div>

function closeDropdown() {
  document.getElementById("dropdown").classList.remove("w3-show");
  const button = document.getElementById("dropdownButton");
  button.setAttribute("aria-expanded", "false");
  button.focus();
}
</script>

</body>
</html>