Bulma Dropdown

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css">
<section class="section">
  <div class="container">
    <div class="control">
      <button class="button" type="button">
        Toggle Dropdown
      </button>

      <div class="box dropdown">
        <ul>
          <li><a class="nav-item">Dropdown Item 1</a></li>
          <li><a class="nav-item">Dropdown Item 2</a></li>
          <li><a class="nav-item">Dropdown Item 3</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

CSS

.dropdown {
  box-shadow: 0 0 8px #777;
  display: none;
  left: 0;
  position: absolute;
  top: 100%;
  z-index: 1000;
}

.dropdown.is-open {
  display: block;
}

JavaScript

const button = document.querySelector('.button');
const dropdown = document.querySelector('.dropdown');
const section = document.querySelector('.section');
button.addEventListener('click', () => {
  dropdown.classList.toggle('is-open');
});
section.addEventListener('click', (event) => {
alert(event.classname)
if(event.target.classname !== 'button'){
  dropdown.classList.remove('is-open');
  }
});