Bulma Dropdown CSS Only

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="has-dropdown">
      <input type="checkbox" id="ch1">   <!-- note: id -->
      <button class="button">
        <label for="ch1">Click me</label>  <!-- note: for -->
      </button>

      <div class="dropdown box">
        <ul>
          <li><a>Action 1</a></li>
          <li><a>Action 2</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

CSS

/* wrapper */
  .has-dropdown input[type="checkbox"] {
    display: none;
  }

  .has-dropdown input[type="checkbox"]:checked ~ .dropdown {
    display: block;
  }

  /* remove padding to avoid unhandled clicks on empty space of button */
  .has-dropdown button {
    padding: 0;
  }
  /* expand label to handle click on any part of button. Set you own padding if .is-medium or .is-large */
  .has-dropdown button label {
    padding: 4px 10px;
  }

  /* dropdown basic */
  .dropdown {
    display: none;
    position: absolute;
    z-index: 9999;
  }

  /* dropdown optional styling */
  .dropdown li:hover {
    background-color: #eee;
    cursor: pointer;
  }
  .button { background: #cf0; padding: 20px !important; height: auto; }