下拉导航栏显示在同一页上的第二个导航栏下

Question

在我的应用程序中，我有两个导航栏在同一页上，他们很好，除非顶部导航栏有一个下拉菜单，它出现在第二个导航栏下

顶部导航器允许用户选择文档的视图，而较低的导航器定义用户可以在该视图中执行的操作。有没有办法让下拉菜单位于第二个导航器之上。 这里是产生这种代码：

<!-- first nav --> 
    <nav class='navbar navbar-default'> 
     <div class="container-fluid"> 
      <div class='navbar-header'> 
       <button type='button' class='navbar-toggle' data-toggle='collapse' 
        data-target='#firstNavbar'> 
        <span class='icon-bar'></span> 
        <span class='icon-bar'></span> 
        <span class='icon-bar'></span> 
       </button> 
       <div class='hidden-sm hidden-md hidden-lg'> 
        <a class="navbar-brand">first</a> 
       </div> 
      </div><!-- navbar-header --> 
      <div class='collapse navbar-collapse' id='firstNavbar'> 
       <ul class="nav nav-pills"> 
        <li role="presentation"> 
         Item One 
        </li> 
        <li role="presentation"> 
         Item Two 
        </li> 
        <li role="presentation"> 
         Item Three 
        </li> 
        <li class="dropdown"> 
         <a class="dropdown-toggle" style="background-color:orange" 
          data-toggle="dropdown" href="#"> 
          Manager Option 
          <span class="caret"></span> 
         </a> 
         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
          <li role="presentation"> 
         Option One 
        </li> 
        <li role="presentation"> 
         Option Two 
        </li> 
        <li role="presentation"> 
         Option Three 
        </li> 
        <li role="presentation"> 
         Option Four 
        </li> 
        <li role="presentation"> 
         Option Five 
        </li> 
         </ul> 
        </li> 

       </ul> 
      </div><!-- collapse --> 
     </div><!-- container --> 
    </nav> 


<nav class='navbar navbar-default'> 
     <div class="container-fluid"> 
      <div class='navbar-header'> 
       <button type='button' class='navbar-toggle' data-toggle='collapse' 
        data-target='#secondNavbar'> 
        <span class='icon-bar'></span> 
        <span class='icon-bar'></span> 
        <span class='icon-bar'></span> 
       </button> 
       <div class='hidden-sm hidden-md hidden-lg'> 
        <a class="navbar-brand">second Nav Bar</a> 
       </div> 
      </div><!-- navbar-header --> 
      <div class='collapse navbar-collapse' id='secondNavbar'> 
       <ul class="nav nav-pills"> 
        <li role="presentation"> 
         Item One 
        </li> 
        <li role="presentation"> 
         Item Two 
        </li> 
        <li role="presentation"> 
         Item Three 
        </li> 
        <li role="presentation"> 
         Item four 
        </li> 
        <li role="presentation"> 
         Item five 
        </li> 
        <li role="presentation"> 
         Item six 
        </li> 

       </ul> 
      </div><!-- collapse --> 
     </div><!-- container --> 
    </nav> 

Answer 1

感谢Frank的解决方案是简单的添加！两个班的z-index设置背后很重要的。显然，还有其他的东西超越了Z-index属性。无论如何，现在工作正常。

Answer 2

这确实是一个自举具体的问题。 XPages并不真正在这里发挥作用。弗兰克提到的问题中有很好的信息。就我个人而言，我会尝试创建一个类来覆盖z-index并将其添加到底部的navBar。使Z指数低于顶部。我认为这会纠正这个问题。