布尔玛导航栏在导航栏中打开下拉菜单。如何在导航栏之外打开它？

Question

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

我的问题是，布尔玛的内置导航栏打开导航栏内的菜单，并通过垂直滚动条显示它。如何设置导航栏或菜单的样式以在导航之外打开？

以下是部署在heroku上供查看的网站。测试是ngbootstrap，其余的是通过从头开始悬停菜单。 http://atozinsurance.herokuapp.com/

这是我的导航组件的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> 

这是我的CSS，包括我从失败尝试制作移动响应下拉的尝试。

.nav { 
    position: fixed; 
    width: 100%; 
    max-height: none!important; 
    overflow-x: visible!important; 
} 

.nav-item { 
    max-height: none!important; 
    overflow-x: hidden!important; 
} 

.nav-right { 
    max-height: none!important; 
    overflow-x: hidden!important; 
} 

.nav-right { 
    margin-right: 20px; 
} 

#callNumber { 
    background-color: #252161; 
    color: white; 
    font-weight: bold; 
    font-style: italic!important; 
} 

ul.nav-item li a { 
    position: absolute; 
} 

ul.nav-item li a p { 
    font-size: 13px!important; 
} 

.nav a:hover { 
    background-color: #252161; 
    color: white; 
} 

#brand:hover { 
    background-color: white!important; 
} 

.dropdown-menu { 
    position: absolute; 
    background-color: white; 
} 

.d-inline-block { 
    position: absolute; 
} 

aside.menu { 
    width: 120px; 
    z-index: 1000; 
    position: fixed; 
    background-color: white; 
    color: #252161; 
    top: 52px; 
    display: none; 
    transition: display 500ms ease; 
} 

@media (min-width: 769px) { 
    .viewNav { 
    display: none!important; 
    } 
    #mobileProductNav { 
    display: none!important; 
    } 
    #mobileFinanceNav { 
    display: none!important; 
    } 
    #mobileAboutNav { 
    display: none!important; 
    } 
} 


@media (max-width: 768px) { 
    a.nav-item:hover > aside.menu { 
    display: none!important; 
    } 
} 

aside ul li a:hover { 
    color: white!important; 
    background-color: #252161!important; 
} 

a.nav-item:hover > aside.menu { 
    display: block; 
} 

a.nav-item.accordion:after { 
    content: '\02795'; /* Unicode character for "plus" sign (+) */ 
    font-size: 13px; 
    color: #777; 
    float: right; 
    margin-left: 5px; 
} 

.viewNav { 
    transition: max-height 5s ease-in!important; 
    max-height: 400px!important; 
    height: 100%!important; 
    display: block!important; 
} 

a.accordion.active:after { 
    content: "\2796"; /* Unicode character for "minus" sign (-) */ 
} 


.insuranceMenu { 
    display: none; 
} 

.aboutMenu { 
    display: none; 
    width: 115px!important; 
} 

.financeMenu { 
    display: none; 
    width: 160px!important; 
} 


@media (max-width: 1425px) { 
    aside.menu { 
    left: 89%; 
    } 
    aside.menu.aboutMenu { 
    left: 92.5%; 
    } 
    aside.menu.financeMenu { 
    left: 82%; 
    } 
} 

@media (max-width: 1375px) { 
    aside.menu { 
    left: 81%; 
    } 
} 

@media (max-width: 1350px) { 
    aside.menu { 
    left: 80%; 
    } 
    aside.menu.financeMenu { 
    left: 81%; 
    } 
} 

@media (max-width: 1325px) { 
    aside.menu { 
    left: 79%; 
    } 
    aside.menu.financeMenu { 
    left: 80%; 
    } 
} 

@media (max-width: 1300px) { 
    aside.menu { 
    left: 78%; 
    } 
} 

@media (max-width: 1275px) { 
    aside.menu { 
    left: 77%; 
    } 
    aside.menu.financeMenu { 
    left: 80%; 
    } 
} 

@media (max-width: 1250px) { 
    aside.menu { 
    left: 76.5%; 
    } 
    aside.menu.financeMenu { 
    left: 79.5%; 
    } 
} 

@media (max-width: 1225px) { 
    aside.menu { 
    left: 76%; 
    } 
    aside.menu.financeMenu { 
    left: 79%; 
    } 
} 

@media (max-width: 1200px) { 
    aside.menu { 
    left: 75.5%; 
    } 
    aside.menu.financeMenu { 
    left: 78.5%; 
    } 
} 

@media (max-width: 1175px) { 
    aside.menu { 
    left: 75%; 
    } 
    aside.menu.financeMenu { 
    left: 78%; 
    } 
} 

@media (max-width: 1150px) { 
    aside.menu { 
    left: 74%; 
    } 
    aside.menu.financeMenu { 
    left: 77.5%; 
    } 
} 

@media (max-width: 1125px) { 
    aside.menu { 
    left: 73%; 
    } 
    aside.menu.aboutMenu { 
    left: 91.5%; 
    } 
    aside.menu.financeMenu { 
    left: 77%; 
    } 
} 

@media (max-width: 1100px) { 
    aside.menu { 
    left: 72%; 
    } 
    aside.menu.financeMenu { 
    left: 76.5%; 
    } 
} 

@media (max-width: 1075px) { 
    aside.menu { 
    left: 71%; 
    } 
    aside.menu.financeMenu { 
    left: 76%; 
    } 
} 

@media (max-width: 1025px) { 
    aside.menu { 
    left: 70%; 
    } 
    aside.menu.financeMenu { 
    left: 75.5%; 
    } 
} 

@media (max-width: 1025px) { 
    aside.menu { 
    left: 69%; 
    } 
    aside.menu.aboutMenu { 
    left: 90.5%; 
    } 
    aside.menu.financeMenu { 
    left: 75%; 
    } 
} 

@media (max-width: 1000px) { 
    aside.menu { 
    left: 68%; 
    } 
    aside.menu.financeMenu { 
    left: 79%; 
    } 
} 

@media (max-width: 975px) { 
    aside.menu { 
    left: 67%; 
    } 
    aside.menu.financeMenu { 
    left: 75%; 
    } 
} 

@media (max-width: 925px) { 
    aside.menu { 
    left: 64.5%; 
    } 
    aside.menu.financeMenu { 
    left: 73%; 
    } 
} 
@media (max-width: 875px) { 
    aside.menu { 
    left: 65.5%; 
    } 
    aside.menu.aboutMenu { 
    left: 89%; 
    } 
    aside.menu.financeMenu { 
    left: 71%; 
    } 
} 

@media (max-width: 865px) { 
    aside.menu { 
    left: 65.5%; 
    } 

    aside.menu.financeMenu { 
    left: 71%; 
    } 
} 

@media (max-width: 850px) { 
    aside.menu { 
    left: 63%; 
    } 
    aside.menu.financeMenu { 
    left: 72%; 
    } 
} 

@media (max-width: 840px) { 
    aside.menu { 
    left: 64%; 
    } 
    aside.menu.financeMenu { 
    left: 71%; 
    } 
} 

@media (max-width: 825px) { 
    aside.menu { 
    left: 65%; 
    } 
    aside.menu.financeMenu { 
    left: 74%; 
    } 
} 

@media (max-width: 820px) { 
    aside.menu { 
    left: 65%; 
    } 
    aside.menu.financeMenu { 
    left: 75%; 
    } 
} 

@media (max-width: 810px) { 
    aside.menu { 
    left: 67%; 
    } 
    aside.menu.financeMenu { 
    left: 76%; 
    } 
} 

@media (max-width: 780px) { 
    aside.menu { 
    left: 67%; 
    } 
    aside.menu.financeMenu { 
    left: 78%; 
    } 
} 

@media (max-width: 768px) { 
    aside.menu { 
    display: none!important; 
    } 
    .nav-item a.menuTitle::after { 
    content: '\02795'; /* Unicode character for "plus" sign (+) */ 
    font-size: 13px; 
    color: #7a7a7a; 
    float: right; 
    margin-left: 5px; 
    } 
    .nav-left { 
    display: none; 
    } 

    .nav-right { 
    margin-right: 0; 
    } 
} 

Answer 1

我检查了如果我做了两个更改，它的工作原理。尝试一下：

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

希望它有帮助！