Add in drop down menu to existing navigation menu - html

Question

I have an existing HTML menu which I need to add further navigation to. I have added in the extra <ul> and <li> tags which I believe are in the correct place. I also have some CSS but ti appears to mess up the links on the nav bar.
Here is an image of what it currently looks like:
http://gyazo.com/b45d1a07de57e617715b74ced91b942b
This is what it like before I added the code for the dropdown menu:
http://gyazo.com/d3dcd6b866187a650f83842beeb0be0d
HTML
<!--TOP NAV BAR SECTION-->
<div id="nav_bar">
<ul>
<li>HOME</li>
<li>STATUS</li>
<li>INFO</li>
<li>GAMEMODES
<ul>
<li>GAMEMODE - SURVIVAL</li>
<li>GAMEMODE - PURE-PVP</li> `enter code here`
<li>GAMEMODE - GAMESWORLD</li>
</ul>
</li>
<li>RULES</li>
<li>VOTE</li>
</ul>
</div>
CSS
#nav_bar {
background-color:#a22b2f;
padding-top:10px;
height:35px;
box-shadow: 0px 2px 10px;
}
#nav_bar ul {
margin:-15px;
margin-left:110px;
}
#nav_bar ul li {
display:inline;
}
#nav_bar ul li ul {
opacity:0;
}
#nav_bar ul li:hover ul {
opacity:1;
}
#nav_bar a:link {
text-decoration: none;
}
#nav_bar a:visited {
color:#ffffff;
}
#nav_bar a:hover {
background:#8c1b1f;
padding-bottom:12px;
padding-top:16px;
padding-left:10px;
padding-right:10px;
}

Answer 1

I had to completely remove your CSS with the exception of the styles which you had applied to #nav_bar and cleaned up your HTML structure as well by removing all the &nbsp's.
#nav_bar {
background-color: #a22b2f;
padding: 10px;
box-shadow: 0px 2px 10px;
}
#nav_bar ul {
text-align: center;
padding-left: 0px;
}
#nav_bar ul li {
display: inline-block;
}
#nav_bar ul li a {
color: white;
font-family: Arial;
text-decoration: none;
font-weight: bold;
padding: 15px;
}
#nav_bar ul li ul {
display: none;
}
#nav_bar ul li:hover ul {
display: block;
position: absolute;
padding: 0px;
background: white;
padding: 10px;
border: 1px solid black;
}
#nav_bar ul li:hover ul li {
display: block;
}
#nav_bar ul li:hover ul li a {
color: black;
}
<div id="nav_bar">
<ul>
<li>HOME
</li>
<li>STATUS
</li>
<li>INFO
</li>
<li>GAMEMODES
<ul>
<li>GAMEMODE - SURVIVAL
</li>
<li>GAMEMODE - PURE-PVP
</li>
<li>GAMEMODE - GAMESWORLD
</li>
</ul>
</li>
<li>RULES
</li>
<li>VOTE
</li>
</ul>
</div>
You can style it further as per your needs.