I'm building a page using Bulma. Unfotunatly, I found something weird. When I hover over one of the two dropdown menus containing class "is hoverable", both of the dropdown menu's trigger, displaying both menu's at the same on.
I would like to only dropdown the one I hoover my mouse over. How could I make this?
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Projects
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href='/projects'>
Projects
</a>
<a class="navbar-item" href=''>
Edit
</a>
<a class="navbar-item" href="/projects/create">
create
</a>
</div>
<a class="navbar-item" href="/contact">
Contact
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Vue.js
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href='/vue'>
Page 1
</a>
<a class="navbar-item" href='/vue2'>
Page 2
</a>
<a class="navbar-item" href='/vue3'>
Page 3
</a>
</div>
You were not closing the divs correctly, two </div> were missing.
See below, now you can align them horizontally with respective Bulma classes/structure.
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Projects
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href='/projects'>
Projects
</a>
<a class="navbar-item" href=''>
Edit
</a>
<a class="navbar-item" href="/projects/create">
create
</a>
</div>
</div>
<a class="navbar-link" href="/contact">
Contact
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Vue.js
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href='/vue'>
Page 1
</a>
<a class="navbar-item" href='/vue2'>
Page 2
</a>
<a class="navbar-item" href='/vue3'>
Page 3
</a>
</div>
</div>