CSS: div is placed over ul -

i have css problem cannot seem grasp. there div id = "header". under there ul dropdown menu. , under have div links.

the problem last div not displayed, because placed under ul. found out fix margin-top:29px, menubar has height, not nicest solution. want nice , future proof.

i added 2 images visible in firebug. can see in second picture, last div smaller menubar , placed under menubar.

hopefully can tell me missing.

edit have made jsfiddle show got (i sorry css contains lots of lines menu) http://jsfiddle.net/ecz4w/

original html:

<div id="header"> <h1 id="logo"><a href="/">koffers4u</a></h1> <div id="navigation">     <ul>         <li><a href="/">home</a></li>         <li><a href="contact.php">contact</a></li>     </ul> </div> </div> <ul class="dropdown dropdown-horizontal"> <li><a href="./" class="dir">menu1</a>       <ul>         <li><a href="./">all</a></li>     </ul> </li> <li><a href="./" class="dir">menu2</a>     <ul>         <li><a href="./">all</a></li>     </ul> </li> </ul> <div> <p>     <a href="http://www.cnn.com" target="_blank">cnn.com</a><br/>     <a href="http://www.cnn.com" target="_blank">cnn.com</a><br/>      <a href="http://www.cnn.com" target="_blank">cnn.com</a><br/>     <a href="http://www.cnn.com" target="_blank">cnn.com</a><br/>  </p> </div>   

if take position:absolute off ul.dropdown should work properly:

http://jsfiddle.net/ecz4w/1/