Q:

CSS drop down menu sub-items overlapping

Good day, this is my first ever question on Stack Overflow, so I hope I get it as right as possible.
I have done extensive research on my problem, mostly reading all the questions I could find on Stack Overflow and some other sites, but I could not find one answer that worked.
Some background: I am trying to write a website for recruiting for my work and it's the first ever website I have ever written. I am using a wamp server to run the site on localhost for testing. My issue is described as best as I could in the title. Find below my html code:
<html>
<head>
<title> BCB Call Plus SRL Home </title>
<link rel="stylesheet" href="Main Style.css">
</head>
<body>
<div id = "main_content">
<ul id = "nav_container">
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px"> </li>
<li> <a href= "Main.html"> Home </a> </li>
<li> <a href= "Page1.html"> Menu 1 </a> </li>
<li> <a href= "Page2.html"> Menu 2 </a> </li>
<li> <a href= "Page3.html"> Menu 3 </a> </li>
<li id ="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href= "Page4.html"> Angajari </a>
    <ul class="sub_menu">
        <li><a href="Page41.html">Ce Vrem</a></li>
        <li><a href="Page42.html">Aplica</a></li>                        
    </ul>
    </li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

And below my CSS code:
body {
text-align:center;
}
a {
    font-size: 150%;
    text-decoration: none;
    color:#000000;
    font-weight: bold;
    vertical-align:middle;
}
a:hover{
    background-color:#338533;
}
ul {
    padding:0;
    margin:0;
}
ul#nav_container{
    background-color:#F2FFF2;
    list-style-type:none;
    text-align:center;
}
ul#nav_container li{
    display:inline-block;
    padding-left:5px;
    padding-right:5px;
    vertical-align:middle;
    position:relative;
}
.sub_menu li a{
    display:none;
}
#angajari ul.sub_menu li {
    float:left;
}
#angajari ul.sub_menu li a {
    position:absolute;
    top:0;
    white-space: nowrap;
    height:auto;
}
#angajari:hover ul.sub_menu li a {
    display:block;
}

Here's a picture of what happens when I hover over the problematic menu item:
Display Issue
Final notes: I am running this only under Chrome for now. I have noticed that it doesn't read my css right in IE 8 (yes, I use IE 8, because one of my bosses wants us to.) Cross-platform compatibility fixes are welcome, but not in the scope of my current question. My WAMPSERVER has apache 2.4.9 and PHP 5.5.12.
I even tried my code on some online web code testing site whose name I forgot and got the same results. If you find that my code actually displays properly, then it may be an issue with my configuration.
Here is a jsfiddle. 

A:

You need your .sub_menu to be absolute, not your li as. That's it!
.sub_menu {
    position:absolute;          
}

Working demo here: http://jsfiddle.net/pxzhqqnb/1/
And I'd make the .sub_menu hidden instead of its children. Personal preference, but I think it makes more sence.
Why does it happen?
Consider this simple example: (think of .relative as position: relative and .absolute as position: absolute)
<div class="relative">
    Text
    <div class="absolute">Link 1</div>
    <div class="absolute">Link 2</div>
</div>

Link 1 is absolute. It searches for the closest relative element. That's .relative. Now Link 1 gets right under the relative div.
Link 2 follows the same rules, thus both links overlap.
Now let's change the code a little:
<div class="relative">
    Text
    <div class="absolute-wrapper">
        <div>Link 1</div><!-- these are now static by default -->
        <div>Link 2</div>
    </div>
</div>

absolute-wrapper is absolute, so it searches for the closest .relative element and gets right under it. Now both links are normal elements wrapped in a div, so they render as expected.
Demo of both examples here: http://jsfiddle.net/w0h7cdhe/2/

