How to display hide/show menu (onblur / onfocus)

Question

I would like to have a second menu (see picture) only when you press the user icon. I managed to put a display "Block" and "Display: None". However when I press on an item of this second menu, this menu disappears.

How to keep the focus of this menu?

Screenshot

    <div class="header-user">
    <button class="block-icone" aria-haspopup="true" onfocus="document.getElementById('myMenu').style.display = 'block';" onblur="document.getElementById('myMenu').style.display = 'none';">
    <img src="https://staging.kanoon.legal/static/media/iconProfile.9defa0f4.svg" alt="icon-profile" data-testid="icon-profile" class="icone-image">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon" aria-hidden="true">
          <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
        </svg>
              <div class="dropdown-menu" id="myMenu" role="menu" style="display: none">
      <a class="dropdown-item" href="https://staging.kanoon.legal/settings"><img src="https://staging.kanoon.legal/static/media/iconSettings.0e56b25f.svg" tabindex="1" alt="icon-settings" data-testid="icon-settings" class="dropdown-icone">Paramètres</a>
      <a class="dropdown-item" href="https://staging.kanoon.legal/logout"><img src="https://staging.kanoon.legal/static/media/iconLogout.63f6a18e.svg" tabindex="2" alt="icon-logout" data-testid="icon-logout" class="dropdown-icone">Se déconnecter</a>
  </div>
    </button>
</div>

Answer 1

You can add a 'click' event listener to the top level menu, that toggles a boolean value of true or false. If true, add a 'display: block' style to the sub menu, if false add a 'display: none' value to the submenu.

index.html

<div>
  <button id='toggle-menu'>Menu</button>
  <div id='sub-menu'>
    <a href='#'>Link 1</a>
    <a href='#'>Link 2</a>
  </div>
</div>

app.js

const toggleMenu = document.getElementById('toggle-menu');
const subMenu = document.getElementById('sub-menu');

let showSubMenu = false;

toggleMenu.addEventListener('click', () => {
  showSubMenu = !showSubMenu
  if (showSubMenu === true) {
    subMenu.style.display = 'none'
  } else {
    subMenu.style.display = 'block'
  }
})

Codepen here: https://codepen.io/srosser2/pen/jOyEBWM?editors=1111