html - 固定 div 上的移动式菜单定位

Question

到目前为止，我已经为我的问题创建了演示。

Demo

我遇到的问题是我需要菜单图像位于 div 的顶部并将整个“imgDiv”向下推，就好像它隐藏在它后面一样。现在我可以实现一些接近但放置'menumobile。直接位于“imgDiv”下方，但它会将内容向下推，但也会导致其位置出现问题。

所以我的目标是让图像漂浮在“imgDiv”顶部的顶部中央，单击它会显示菜单并下推整个“imgDiv”，而不仅仅是内容，还有我正在努力让它发挥作用。

<center><div id="menumobile">
            <div id="nav-mobile">
                    <a href="#"><img src="img/menu.png" alt="Menu" class="menuimage"/></a>
                        <ul>
                            <li><a href="#imgDiv2">Item1</a></li>
                            <li><a href="#imgDiv3">Item2</a></li>
                        <li><a href="#imgDiv4">Item3</a></li>
                            <li><a href="#packages">Item4</a></li>
                            <li><a href="#imgDiv5">Item5</a></li>                         
                        </ul>
                <br /><br />
            </div>
        </div>  
</center>


<div id='imgDiv'>
    <div> 

        <div class="containeralt">
            <h1>Header</h1>
                <br />
                <a href="#imgDiv2"><span class="icon lush-arrow-circle-down" style="font-size: 50px; color: #FFFFFF;"></span></a>
        </div>
    </div>
</div>

请忽略中心标签，我只是将它们用于演示目的。

$(document).ready(function() {

    $('#nav-mobile ul').hide();
    $('#nav-mobile a').click(function(e) {
        $('#nav-mobile ul').slideToggle(200);
    });
});

#imgDiv {
    position:relative;
    height:75%;
    width:100%;
    background-image:url(http://walljpg.com/wp-content/uploads/2014/04/blurry-backgroundgriscomkz-dpilzwd3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #666666;
    display:table;
    text-align: center;
    background-attachment:fixed;
    position:relative;
    margin-top: -20px;
}

#imgDiv > div:first-child {
    display:table-cell;
    vertical-align:middle;
    width:100%;
}


#nav-mobile > a {display:inline-block;}

#menumobile{
    background-color: transparent;
    text-align:center;
    margin-top: 40px;
    margin-bottom:40px;
    z-index: 999999;
}

#nav-mobile, #nav-mobile ul, #nav-mobile li {
    position: relative; 
     background: none;  
}
#nav-mobile ul {
    margin: 0;
    padding: 0;
    width: 100%;
    padding: 20px 0 60px 0;
}
#nav-mobile ul li {
    width: 100%;
    display: block; 
    padding: 20px 0 20px 0;
    margin: 0;
}

#nav-mobile ul a{
    color: #000;
    text-decoration:none;
    font-size: 16px;
}

#nav-mobile ul a:hover {
    background: none; 
    color: #FFF;     

}
#nav-mobile ul li:hover {

}   

.menuimage{width: 30px; height: 30px;}

Answer 1

尝试将这些属性添加到您的 ul 标签中:position 和 z-index，如下所示。

#nav-mobile ul {
    margin: 0;
    padding: 0;
    width: 100%;
    padding: 20px 0 60px 0;
    position:absolute;
    z-index:999;
    }

如果这是您期望的行为，请告诉我。希望对您有所帮助!