2 Bulma.io 个下拉导航项

Question

我正在使用 Bulma 构建页面。不幸的是，我发现了一些奇怪的东西。当我将鼠标悬停在包含 class "is hoverable" 的两个下拉菜单之一上时，两个下拉菜单的触发器都会同时显示两个菜单。

我只想下拉鼠标悬停的那个。我怎么能做到这一点？

<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>

Answer 1

您没有正确关闭 div，缺少两个 </div>。见下文，现在您可以将它们与相应的 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>

2 Bulma.io 个下拉导航项

2 Bulma.io dropdown nav items

css

bulma