如何让Bulma的Navbar下拉项始终可见且仅在hover时激活

嘿，我来帮你搞定这个Bulma导航栏的问题～你现在遇到的情况是，当屏幕尺寸小于1088px时，右侧的下拉菜单会自动展开，而你希望它始终保持可见状态，并且只在鼠标悬停时才展开下拉内容。这是因为Bulma在移动端默认会把下拉菜单改成点击触发模式，我们只需要调整结构并添加一点自定义CSS就能解决。

第一步：调整导航栏结构 #

首先，我们把下拉菜单移到更符合Bulma规范的位置（navbar-end里），这样能避免布局冲突，也更容易控制样式：

<nav class="navbar">
  <div class="container">
    <!-- 左侧Logo区域 -->
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img src="img.png" width="131" height="35">
      </a>
    </div>

    <!-- 右侧菜单区域，添加is-active确保始终显示 -->
    <div class="navbar-menu is-active">
      <div class="navbar-end">
        <!-- 下拉菜单 -->
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link"> Docs </a>
          <div class="navbar-dropdown">
            <a class="navbar-item"> Overview </a>
            <a class="navbar-item"> Elements </a>
            <a class="navbar-item"> Components </a>
            <hr class="navbar-divider">
            <div class="navbar-item"> Version 0.7.1 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

第二步：添加自定义CSS覆盖默认行为 #

接下来，我们写一段CSS来强制在小屏幕下保持hover展开的逻辑，同时让菜单始终可见：

/* 针对屏幕宽度小于1088px的情况 */
@media screen and (max-width: 1087px) {
  /* 确保navbar-menu不会被折叠隐藏 */
  .navbar-menu {
    display: flex !important;
    position: static;
    box-shadow: none;
    padding: 0;
  }

  /* 默认隐藏下拉内容 */
  .navbar-item.has-dropdown.is-hoverable .navbar-dropdown {
    display: none;
  }

  /* 鼠标悬停时显示下拉内容，并调整位置对齐右侧 */
  .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown {
    display: block;
    position: absolute;
    right: 0;
    top: 100%;
  }
}

为什么这么做？ #

• 调整结构是为了遵循Bulma的导航栏设计规范，避免因结构不当导致的样式冲突；
• 给navbar-menu加上is-active类，确保它在移动端不会被折叠成汉堡菜单，始终可见；
• 媒体查询里的CSS覆盖了Bulma在移动端对下拉菜单的默认行为，强制它只有在hover时才展开下拉内容，同时保持和桌面端一致的右侧对齐效果。

内容的提问来源于stack exchange，提问作者sven