Css Bulma导航栏打开导航栏中的下拉菜单。如何在导航栏外打开它？

我正在用Angular 4开发一个网站。我决定在开发过程的早期使用Bulma CSS框架，因为我喜欢这个设计。Bulma没有用于下拉菜单的内置组件，所以在尝试创建自己的下拉菜单失败后，我添加了NgBootstrap

我的问题是，Bulma的内置导航栏正在打开导航栏内的菜单，并通过垂直滚动条显示。如何设置导航栏或菜单的样式以在导航外部打开

这是部署在heroku上供查看的网站。测试是ngbootstrap，其余的都是通过悬停菜单上的scratch构建的。

这是我的导航组件的HTML代码

<nav class="nav has-shadow">
  <div class="nav-left">
    <a href="tel:+1-888-721-2511" class="nav-item" id="callNumber"><span class="fa fa-phone"></span>1-888-721-2511</a>
    <a class="nav-item">
      Ayuda en Español
    </a>
    <!--<a class="nav-item">-->
      <!--Companies We Offer-->
    <!--</a>-->
  </div>

  <div class="nav-center">
    <a class="nav-item" id="brand" routerLink="/">
      <img src="../../assets/a-z-logo.jpg" alt="A to Z Insurance logo">
    </a>
  </div>

  <span class="nav-toggle" (click)="toggleActive()" [ngClass]="{'is-active': isActive}">
    <span></span>
    <span></span>
    <span></span>
  </span>


  <div class="nav-right nav-menu" [ngClass]="{'is-active': isActive}">
    <a class="nav-item" (click)="toggleMobile('product')">
      <a class="menuTitle">Products</a>
      <aside class="menu insuranceMenu">
        <ul id="products" class="menu-list">
          <li><a routerLink="/auto-insurance"><p>Auto</p></a></li>
          <li><a routerLink="/home-insurance"><p>Home</p></a></li>
          <li><a routerLink="/life-insurance"><p>Life</p></a></li>
          <li><a routerLink="/health-insurance"><p>Health</p></a></li>
          <li><a routerLink="/financial-services">Financial</a></li>
          <li><a routerLink="/commercial-insurance"><p>Commercial</p></a></li>
          <li><a routerLink="/more-insurances"><p>More</p></a></li>
        </ul>
      </aside>
    </a>
    <div class="nav-item" id="mobileProductNav" [ngStyle]="{'display': mProductOpen ? 'block': 'none'}">
      <ul>
        <li><a routerLink="/auto-insurance">Auto</a></li>
        <li><a routerLink="/home-insurance">Home</a></li>
        <li><a routerLink="/life-insurance">Life</a></li>
        <li><a routerLink="/health-insurance">Health</a></li>
        <li><a routerLink="/financial-services">Financial</a></li>
        <li><a routerLink="/commercial-insurance">Commercial</a></li>
        <li><a routerLink="/more-insurances"><p>More</p></a></li>
      </ul>
    </div>
    <div ngbDropdown class="nav-item">
      <div ngbDropdownToggle id="dropDown1">Test</div>
      <div class="dropdown-menu" aria-labelledby="dropDown1">
        <button class="dropdown-item">Test item</button>
        <button class="dropdown-item">Test item</button>
        <button class="dropdown-item">Test item</button>
        <button class="dropdown-item">Test item</button>
      </div>
    </div>
    <a class="nav-item" id="financeTab" (click)="toggleMobile('finance')">
      <a class="menuTitle">Business</a>
      <aside class="menu financeMenu">
        <ul id="financial" class="menu-list">
          <li><a routerLink="/business-ein">EIN</a></li>
          <li><a routerLink="/business-llc">LLC</a></li>
          <li><a routerLink="/business-cards">Cards</a></li>
          <li><a routerLink="/business-s-corp">S-Corp</a></li>
          <li><a routerLink="/business-license">License</a></li>
          <li><a routerLink="/business-branding">Branding</a></li>
        </ul>
      </aside>
    </a>
    <div class="nav-item" id="mobileFinanceNav" [ngStyle]="{'display': mFinanceOpen ? 'block': 'none'}">
      <ul>
        <li><a routerLink="/business-ein">EIN</a></li>
        <li><a routerLink="/business-llc">LLC</a></li>
        <li><a routerLink="/business-cards">Cards</a></li>
        <li><a routerLink="/business-s-corp">S-Corp</a></li>
        <li><a routerLink="/business-license">License</a></li>
        <li><a routerLink="/business-branding">Branding</a></li>
      </ul>
    </div>
    <a class="nav-item" id="aboutTab" (click)="toggleMobile('about')">
      <a class="menuTitle">About</a>
      <aside class="menu aboutMenu">
        <ul id="about" class="menu-list">
          <li><a routerLink="/about">A to Z</a></li>
          <li><a routerLink="/blog">Blog</a></li>
          <li><a routerLink="/contact">Contact</a></li>
          <li><a routerLink="/locations">Location</a></li>
        </ul>
      </aside>
    </a>
    <div class="nav-item" id="mobileAboutNav" [ngStyle]="{'display': mAboutOpen ? 'block': 'none'}">
      <ul>
        <li><a routerLink="/about">A to Z</a></li>
        <li><a routerLink="/blog">Blog</a></li>
        <li><a routerLink="/contact">Contact</a></li>
        <li><a routerLink="/location">Location</a></li>
      </ul>
    </div>
  </div>
</nav>

---

我检查了一下，如果我做了两个改变，它就会工作。你自己试试吧：

.nav-right.nav-menu {
    overflow-y: visible;
}
.nav-item[_ngcontent-c1], .nav-right[_ngcontent-c1] {
    overflow-x: visible !important;
}

---

希望有帮助

这对我有用。我还试着添加了另一个项目，它们都有效。谢谢@乔纳桑科林没问题！很乐意帮忙！：）

.nav-right.nav-menu {
    overflow-y: visible;
}
.nav-item[_ngcontent-c1], .nav-right[_ngcontent-c1] {
    overflow-x: visible !important;
}