下拉菜單推出div下面

Question

我需要一些下拉菜單的幫助。我創建了一個演示來展示我的內容。

Demo Fiddle

我需要爲什麼菜單不低於下推內容一些建議。我正在嘗試創建一個位於div上的按鈕，當按下該菜單時，會將div推下來以顯示菜單列表。而按鈕仍然位於div的頂部，但在菜單下方。

<div id="nav-mobile"> 
    <a href="#">Menu</a> 
    <ul style="display: none;"> 
     <li><a href="index.php">Home</a></li> 
     <li><a href="#">Why Us</a></li> 
     <li><a href="#">Our Work</a></li> 
     <li><a href="#">Our Equipment</a></li> 
     <li><a href="#">Video Production</a></li> 
     <li id="last-child"><a href="#">Contact</a></li> 
    </ul> 
</div> 




<!-- First Section --> 

<div id='imgDiv'> 
    <div> 
     <div class="containeralt"> 
      <img src="img/allthingslogo.gif" /> 
      <br><br><br> 
      <h1 style="font-weight: 100; border: none; font-size: 27px; line-height: 57px; max-width: 800px; margin: 0 auto;"> and the web.</h1> 
      <br /><br><br /><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').click(function(e) { 
     e.preventDefault(); 
     $('#nav-mobile ul').slideToggle(); 
    }); 
}); 

Answer 1

烏爾圖像是重疊的菜單。請看到這個小提琴http://jsfiddle.net/MRhR2/3/

下面
<!--First section-->

去除部分稅號

<div id="nav-mobile"> 
    <a href="#">Menu</a> 
    <ul style="display: none;"> 
     <li><a href="index.php">Home</a></li> 
     <li><a href="#">Why Us</a></li> 
     <li><a href="#">Our Work</a></li> 
     <li><a href="#">Our Equipment</a></li> 
     <li><a href="#">Video Production</a></li> 
     <li id="last-child"><a href="#">Contact</a></li> 
    </ul> 
</div> 




<!-- First Section --> 

Answer 2

nav-mobile div有一個高度屬性，導致它保持該大小。您可以設置最小高度或刪除nav-mobile div的高度屬性，並刪除imDiv的margin-top：-20屬性，它將正確顯示。

div#nav-mobile { 
    display: block; 
    padding-top: 12px; 
    font-size: 0.9em; 
} 

div#imgDiv { 
    position:relative; 
    height:75%; 
    width:100%; 
    background-image:url(http://carmel.coop/wp-content/uploads/2014/04/colorful_blurry_background_ii-wallpaper-1366x768.jpg); 
    background-attachment:fixed; 
    background-color:transparent; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center; 
    color: #FFF; 
    display:table; 
    text-align: center; 
    background-attachment:fixed; 
    position:relative; 
} 

Updated fiddle here