屏幕较小时，下拉菜单在Navbar内部崩溃

Question

单击此处查看

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

我已经尝试了z索引，位置属性等，但没有一种作品。

如何使下拉菜单在导航栏外显示而不是内部崩溃？

这是我的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，因为屏幕尺寸没有问题，除非它达到768px或以下。另外，图片上的视图没有下拉列表的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;
}

添加溢出：隐藏到下拉类：

.dropdown {
    overflow:hidden;
}

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