(HTML + CSS) Knowing exact distances in em - html

Question

I'm kind of knew (some days) to this so this might be a dumb question.
I'm trying to make a navbar with three links/buttons. Two of them, when hovered, simply change the background to a darker one, the third one, opens a small menu with more links/buttons.
This is what I did (probably not the best method, but the first that came into my mind):
http://jsbin.com/woxodovoxo/1/edit?html,css
My problem is that on the button in the middle, the positions are not right (you can see that the button flickers a little when you hover your mouse over it, although this doesn't happen on the other buttons).
This is happening because I wasn't able to put #text-dropdown and #dropdown-div on the same starting position, since I couldn't find the right value for the "margin-top; padding-top" on #dropdown-div
From what I see on the code, .headertext is 0.5em (+ font-size) underneath the top of the page.
The problem comes with #dropdown-div, since I don't know its original position (without any tweaking) relative to the top of the page. If I were to know that, I could simply make a calculation to know which values to put in "margin-top; padding-top" on #dropdown-div.
Could you help me with that?
Also, percentages and em's don't seem to go well together, specially on the navbar when zooming in/out. What alternative could I use? Everything with em's? Everything with percentages? Or something else?
Thanks

Answer 1

Would this solve your problem? I didn't copy over your exact code because it was exhausting to read, but hopefully it gets you in the write direction. If you set an objects position to be absolute with its parent set to relative you can move it around relative to its parent.
Also, the box-sizing attribute may help you in the future. Makes it so that the padding/borders are included in the size calculations.
div#navbar {
width: 100%;
height: 2em;
}
div#navbar *,
div#navbar {
padding: 0;
margin: 0;
background-color: #3ff;
}
div#navbar div {
display: inline-block;
position: relative;
box-sizing: border-box;
height: 100%;
width: 150px;
}
div#navbar div>div {
display: none;
position: absolute;
top: 100%;
left: 0;
height: auto;
}
div#navbar div:hover>div {
display: block;
}
<div id="navbar">
<div>Something 1</div>
<div>Submenu
<div>
Other text
<br />Yup
</div>
</div>
<div>
hello
</div>
</div>

Answer 2

.headerlink{
height: 3em;
line-height: 3em;
width: 25%;
z-index: 1;
position: fixed;
}
.headertext{
text-align: center;
font-size: 1.3em;
font-family: 'Verdana';
color: #E3E3E3;
font-weight: bold;
}
#dropdown-div{
position: absolute;
top:100%;
width:100%;
background-color: #57a58a;
opacity: 0;
}
Modify the above styles and delete the below one
#hd2:hover #text-dropdown{
opacity: 0;
}
Edit:
Add this too..
#hd2:hover{
background-color: #57a58a;
}
and remove this extra option:
<div class="header-dropdown">Page2</div>