当屏幕较小时，下拉菜单在导航栏中折叠

Question

Click here for the view

如您所见，下拉菜单有问题。当屏幕大于 768 像素（这是我在媒体查询中设置的宽度）时，它可以正常工作，但是当屏幕宽度现在等于或小于 768 像素时，下拉菜单不会显示在导航之外，而是在导航栏中折叠.请看图片，看看会发生什么。

我已经尝试过 z-index、位置属性等，但没有一个有效。

如何使下拉菜单显示在导航栏之外而不是折叠在导航栏内？

这是我的导航 HTML：

                <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a id="sidebarCollapse" href="#" data-toggle="offcanvas"><i class="fa fa-navicon fa-2x"></i></a>
                    </div>
                    <div id="navbar-right">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#" id="log">Logout 2</a></li>
                            <li>
                                <div class="dropdown">
                                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
                                    <span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">HTML</a></li>
                                        <li><a href="#">CSS</a></li>
                                        <li><a href="#">JavaScript</a></li>
                                    </ul>
                                </div>  
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

这里是 CSS，我只在媒体查询中包含 CSS，因为屏幕尺寸没有问题，除非它达到 768 像素或以下。图片上的视图也没有下拉的 CSS，所以它是没有任何样式的实际下拉：

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #content {
        width: 100%;
    }
    #content.active {
        width: calc(100% - 250px);
    }
    .container-fluid {
        display: inline-flex;
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: absolute;
        padding: 0;
        margin: 0;
    }
    .container-fluid #navbar-right {
        width: 100%;
    }
    .container-fluid ul {
        display: inline-flex;
        float: right;
    }
    ul.nav {
        height: 100%;
        margin: 0;
    }
    .navbar {
        padding: 0;
        margin: 0;
    }
    .navbar-header a i {
        margin-left: 15px;
    }
    .navbar-right li a {
        height: 100%;
        line-height: 30px;
    }
    /****/
    ul.dropdown-menu {
    }

}

Answer 1

从容器流体类中移除隐藏的溢出：

.container-fluid {
display: inline-flex;
width: 100%;
height: 100%;
position: absolute;
padding: 0;
margin: 0;
}

将overflow:hidden添加到下拉类中：

.dropdown {
    overflow:hidden;
}

Codepen 链接： https://codepen.io/anon/pen/mpEjXq?editors=1100