2个Bulma.io下拉导航项目
2个Bulma.io下拉导航项目
提问于 2018-10-22 04:37:27
我正在使用Bulma构建一个页面。不幸的是，我发现了一些奇怪的东西。当我将鼠标悬停在包含类"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>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-22 04:53:36
您没有正确关闭</div>，缺少两个div。如下所示，现在您可以将它们与各自的Bulma类/结构水平对齐。
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52919642
复制相关文章
相似问题