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

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

这确实是一个引导程序特定的问题。 XPages 在这里并没有真正发挥作用。弗兰克链接的问题中有很好的信息。就个人而言，我会尝试创建一个类来覆盖 z-index 并将其添加到底部导航栏。使 z-index 低于顶部的 z-index。我认为这会纠正这个问题。

Answer 2

感谢 Frank，解决方案是在两个类的 z-index 设置后面简单地添加 !important。显然还有其他东西覆盖了 z-index 属性。无论如何，现在工作正常。