Question

正如您所看到的，我对下拉列表有疑问。当屏幕大于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>

这里是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

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

1 个答案: