定位在固定格子上的移动样式菜单

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

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

让我知道这是否是您期望的行为。希望能帮助到你！