定位在固定格子上的移動樣式菜單

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; 
    } 

讓我知道這是否是您期望的行爲。希望能幫助到你！