Question

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

我遇到的问题是我需要将菜单图像放在div的顶部并推动整个＆＃39; imgDiv＆＃39;好像它藏在它后面一样现在我可以取得一些接近的东西，但放置了“menumobile”。直接位于＆＃39; imgDiv＆＃39;但它会把内容推下来，但也会导致问题。

所以我的目标是让图像漂浮在“imgDiv”顶部的顶部中央。当点击它时，它显示菜单并按下整个＆＃39; imgDiv＆＃39;而不只是内容，但我正在努力使其发挥作用。

<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标记：位置和 z-index ，如下所示。

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

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

移动样式菜单定位在固定div上

1 个答案: