如何使 navbar-item 下拉列表始终可见并仅在 bulma 中悬停时处于活动状态

Question

在 bulma 导航栏中，左侧有一个徽标，右侧有一个下拉菜单。我想让菜单始终可见并且只在悬停时打开。现在当屏幕尺寸小于1088px时，右边的下拉菜单会自动打开。

<nav class="navbar">
  <div class="container">
    <div class="navbar-brand is-expanded">
      <a class="navbar-item" href="#">
        <img src="img.png" width="131" height="35">
      </a>

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

Answer 1

也许这会对你有所帮助

    .navbar-dropdown {
     background-color: white;
     border-bottom-left-radius: 6px;
     border-bottom-right-radius: 6px;
     border-top: 2px solid #dbdbdb;
     box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
     display: none;
     font-size: 0.875rem;
     left: 0;
     min-width: 100%;
     position: absolute;
     top: 100%;
     z-index: 20;
    }
    .navbar-item:hover .navbar-dropdown{
      display: block;
      }
@media screen and (max-width: 1088px){
.navbar-dropdown{
display: none;
}
}

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" media="all" />
    <nav class="navbar">
      <div class="container">
        <div class="navbar-brand is-expanded">
          <a class="navbar-item" href="#">
            <img src="img.png" width="131" height="35">
          </a>

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

如何使 navbar-item 下拉列表始终可见并仅在 bulma 中悬停时处于活动状态

How to make navbar-item dropdown always visible and active only with hover in bulma

css

bulma