如何使导航栏项目下拉菜单始终可见且仅在 bulma 中悬停时才处于活动状态

Sven 发表于 Dev

斯文

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

克文巴巴尔

也许这会帮助你

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。