Question

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

我只想将鼠标悬停在上面的那个下拉列表。我该怎么做？

<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>。参见下文，现在您可以将它们与各自的布尔玛类别/结构水平对齐。

<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下拉导航项目

1 个答案: