Css 当屏幕变小时，下拉菜单在导航栏内折叠

正如你所看到的，我的下拉列表有问题。当屏幕大于768px（这是我在媒体查询中设置的宽度）时，它工作正常，但当屏幕宽度等于或小于768px时，下拉菜单不会显示在导航栏外，而是折叠在导航栏内。请看这张图片看看会发生什么

我已经试过z-index、position属性等，但没有一个有效

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

以下是我的导航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>

---

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

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

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

.dropdown {
    overflow:hidden;
}

---

代码笔链接：

我刚才注意到了。花了一个星期的时间才成功。还是谢谢你：D

.dropdown {
    overflow:hidden;
}