.animate after .animate

I have website with a header div, within the header I have a basic 1 level menu. I have used an .animate function in combination with easing to make the menu appear:

CSS:


#header {
 width: 65%;
 max-width: 960px;
 height: 50px;
 line-height: 50px;
 margin: -50px auto 0;
 overflow: hidden; 
 position: relative;
 z-index: 1;
}

Javascript:


$("#header").animate({top: '+=70'}, 700, 'easeOutBounce');

There is one page though where I have a seconde level submenu. What I try to acomplish is that when the main menu is in place the submenu is fading in and sliding down from its parent position.

This is what I have to make this work:

CSS:


#menu ul {
  margin:0 0 0 10px; 
  white-space:nowrap; 
  float:left;
  position: absolute;
}

Javascript:


$(document).ready(function() {
  $('#submenu').hide();
  $("#header").animate({top: '+=70'}, 700, 'easeOutBounce', function(){
    $('#submenu').fadeIn(400).animate({top: '+=40'}, 400);
  });
});

The function is working but instead that it is appearing from behind its parent (menu), it is coming from outside of the viewport, then you see it for a second and start indeed to fade in and animates dowwn to below the parent. On this page you can see what I mean. What should I do to make it appear from the parrent. Thank you in advance.

Hi,

Currently the second level of navigation fades in.
Do you want to have it drop down instead?