Question

我已经创建了一个自定义导航栏，由于当今的移动趋势，我已决定做出响应。

然而，当我在fixed导航栏中创建子下拉菜单时，它会完全混乱（不会正确显示），除此之外页面不会向下滚动以显示所有子导航项。

这是我的JSFiddle：http://jsfiddle.net/7j6ckx0g/

我已尝试将导航栏的position更改为static，这解决了第二个问题，但我想要修复导航栏。

感谢您的帮助：）

Answer 1

第一次添加功能

function sybnavtop(){
    var rowheight = $('.row').outerHeight();
    $('#nav-visible').css('top',rowheight);
}

此函数获取行类div的高度以将列表顶部调整到列表中，并在窗口调整大小并在文档加载中调用它

$(window).on('resize',function(){
        sybnavtop();
    });

媒体屏幕中的

在＃nav-visible

中制作

position: fixed;
overflow-y: auto !important;
overflow-x: hidden !important;
bottom:0;

#nav-visible {
        border-top: 2px solid #E0E0E0;
        border-bottom: 2px solid #E0E0E0;
        display: none;
        visibility: hidden;
        text-align: center;
        z-index: 3;
        position: fixed;
        background: white;
        width: 100%;
        left: 0;
        padding: 10px 0;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        bottom:0;
}

DEMO

注意：我的代码可以让您知道如何实现目标..可能您需要另一个@media屏幕和（max-width：400px）以正确的方式使用您的列表

固定的Navbar子下拉列表无法正确显示

1 个答案: