jquery - Align top of div to bottom of it's parent -

current site: http://goo.gl/sa2ajx

i have size changing header (uses css3 animations , jquery) bunch of li tags in it.

when hover on 1 of li elements, want secondary header drop below original 1 (which contains links). when add second div, how can align directly underneath main div without regardless of size?

edit: if resize browser window, header changes it's size. why i'm having trouble, can't change around css make fit because different on screen.

here code simple drop down menu.

.list  {    width:12.5%;   }    #primary_nav_wrap  {  	margin-top:15px;    width:100%;  }    #primary_nav_wrap ul  {  	list-style:none;  	position:relative;  	//float:left;  	margin:0;  	padding:0  }    #primary_nav_wrap ul  {  	display:block;  	color:#333;  	text-decoration:none;  	font-weight:700;  	font-size:12px;  	line-height:32px;  	padding:0 15px;  	font-family:"helveticaneue","helvetica neue",helvetica,arial,sans-serif  }    #primary_nav_wrap ul li  {  	position:relative;  	float:left;  	margin:0;  	padding:0  }    #primary_nav_wrap ul li.current-menu-item  {  	background:#ddd  }    #primary_nav_wrap ul li:hover  {  	background:#f6f6f6  }    #primary_nav_wrap ul ul  {  	display:none;  	position:absolute;  	top:100%;  	left:0;  	background:#fff;  	padding:0  }    #primary_nav_wrap ul ul li  {  	float:none;  	width:200px  }    #primary_nav_wrap ul ul  {  	line-height:120%;  	padding:10px 15px  }    #primary_nav_wrap ul ul ul  {  	top:0;  	left:100%  }    #primary_nav_wrap ul li:hover > ul  {  	display:block  }

<h1>simple pure css drop down menu</h1>  <nav id="primary_nav_wrap">  <ul>    <li class="current-menu-item list"><a href="#">home</a></li>    <li class="list"><a href="#">menu 1</a>      <ul >        <li><a href="#">sub menu 1</a></li>        <li><a href="#">sub menu 2</a></li>        <li><a href="#">sub menu 3</a></li>        <li><a href="#">sub menu 4</a></li>        <li><a href="#">sub menu 5</a></li>      </ul>    </li>    <li class="list"><a href="#">menu 2</a>      <ul>        <li><a href="#">sub menu 1</a></li>        <li><a href="#">sub menu 2</a></li>        <li><a href="#">sub menu 3</a></li>      </ul>    </li>    <li class="list"><a href="#">menu 3</a>      <ul>        <li class="dir"><a href="#">sub menu 1</a></li>        <li class="dir"><a href="#">sub menu 2 long might cause isseue maybe not?</a>        </li>        <li><a href="#">sub menu 3</a></li>        <li><a href="#">sub menu 4</a></li>        <li><a href="#">sub menu 5</a></li>      </ul>    </li>    <li class="list"><a href="#">menu 4</a></li>    <li class="list"><a href="#">menu 5</a></li>    <li class="list"><a href="#">menu 6</a></li>    <li class="list"><a href="#">contact us</a></li>  </ul>  </nav>

hope helps!!