Bulma hoverable dropdown doesn't show

Viewed 28

js computes the structure below, i need a dropdown when the button is hovered whereas onclick should trigger the form submit. enter image description here

nothing happens when i hover the button area. Is it because of is-active missing?

1 Answers

In Bulma's official docs about the dropdown menu, the example's indent can be confusing. The "dropdown-menu" 'div' is a childnode of the main dropdown 'div'.

<div class="dropdown is-hoverable">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
      <span>Hover me</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu4" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
      </div>
    </div>
  </div>
</div>
Related