Выпадающее меню при фокусе

Есть кнопка с меню

<button class="show-menu" style="display: flex; align-items: center;">
  <h3>Помощь</h3>
</button>
<ul class="menu menu--hide">
  <li class="menu__item" style="display: flex; align-items: center;" >
    <p>Тест</p>
  </li>
  <li class="open-record-panel-btn menu__item" style="display: flex; align-items: center;" >
    <p>Тест2</p>
  </li>
</ul>

И такой код, который навешивает событие (скрывает открывает), но работает оно при клике, а надо фокусом. Подскажите как сделать, чтобы кнопка срабатывала фокусом, а при клике на другую область меню скрывалось

var linkBtn = document.querySelector('.show-menu');
if (linkBtn) {
  linkBtn.addEventListener('click', function(event) {
    event.preventDefault();
    var menuList = document.querySelector('.menu--hide');
    if(menuList) {
      menuList.classList.toggle('menu--show');
    }
  });
}