change position on menu using div - html

Question

First of all, I'm new to HTML and CSS so please be kind with me!:)
So, for a school assignment I need to replicate the IKEA website. I'm having a problem where a menu drops down about 150px
What it needs to be:
What I got:
The part in the blue box needs to go where the arrow points.
The code I got:
HTML:
<header>
<h1>
<a href="index.html">
<img src="logo.gif" alt="IKEA" title="Klik hier om terug te gaan naar de hoofdpagine" />
</a>
</h1>
<div id="login">
<p>Welkom bij IKEA België! <a href="#">Log in<a> of <a href="#">maak een profiel aan<a></p>
</div>
<div id="headerlinkswrapper">
<div class = "headertaal">
NL
FR
</div>
<div class = "headerlijst1">
Winkel informatie
IKEA FAMILY
Mijn boodschappenlijs
</div>
<div class = "headerlijst2">
Startpagina
Mijn profiel
Jobs#IKEA
</div>
<div class = "headeranna">
Vraag het aan Anna"
Vraag het aan Anna
</div>
</div>
<nav id="hoofdmenu">
<ul>
<li>Alle producten</li>
<li>Nieuw</li>
<li>Promoties</li>
<li>Inspiratie</li>
<li>Plannen</li>
<li>Praktische info</li>
<li>3D Keukenplanner</li>
<li>Alle afdelingen</li>
</ul>
</nav>
</header>
CSS:
#wrapper {
background-color: white;
width: 900px;
margin: auto;
}
#wrapper > header {
height: 200px;
}
#wrapper > header {
position: relative;
}
#wrapper > header h1 {
position: relative;
top: 10px;
left: 10px;
margin: 0;
padding: 0;
}
#login {
position:relative;
margin-left: 10px;
}
#hoofdmenu ul li {
display: inline-block;
margin-top: 10px auto;
margin-left: 0;
margin-right: 0;
float: inherit;
}
#headerlinkswrapper {
position: absolute;
width: 400px;
margin-left:450px;
margin-right: 10px;
float:right;
}

Answer 1

You were almost there.
#headerlinkswrapper {
margin-top: -140px; /* I'm estimating distance, change this! */
}