Drop down menu to push out div below

Question

I need some assistance with a drop down menu. I have created a demo to show what I have.

Demo Fiddle

I need some advice on why the menu isn't pushing down the contents below. I am trying to create a button that sits over the div and when pushed the menu pushes the div down to reveal the menu list. and the button to still be sat on top of the div but below the menu.

<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

There is a height attribute for the nav-mobile div, which causes it to remain that size. You can either set a min-height or remove the height attribute of the nav-mobile div and remove the margin-top:-20 attribute of the imDiv and it will display properly.

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

Answer 2

Ur image was overlapping menu .Please see this fiddle http://jsfiddle.net/MRhR2/3/

Removed portion below
<!--First section--> heading

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