Why doesn't this CSS menu work?

Why doesn't this CSS menu work?

I can't seem to figure out why this isn't working properly. It's supposed
to be a generic dropdown css menu. I haven't gotten to the part where I
make the dropdown list invisible (I'll set display: none when I get to it,
lol) but for now I'm just trying to get the layout right. However, the
part that isn't working the way I want it to is the actual dropdown part.
It is supposed to hover over the page content, but instead it seems to be
pushing it down even though I set a z-index. Anyone know why?
Here is the HTML:
<div id="navigation">
<div id="nav-container">
<ul id="nav">
<li><a href="index.html">HOME</a></li>
<li><a href="page2.html">PAGE 2</a></li>
<li><a href="page3.html">PAGE 3</a></li>
<li><a href="page4.html">PAGE 4</a></li>
<li>
<a href="test.html">TEST</a>
<ul>
<li><a href="test2.html">TEST 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content-container">
CONTENT GOES HERE
</div>
And here is the CSS:
#navigation {
position: relative;
top: 110px;
width: 100%;
height: 50px;
background-color: #179326;
z-index: 5;
}
#nav-container{
width: 1000px;
margin: 0 auto;
}
#nav {
position: relative;
padding: 0px;
border: 0px;
list-style-type: none;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#nav li {
position: relative;
float: left;
padding: 0px;
background-color: #179326;
color: #FFFFFF;
font-size: 25px;
font-family: "Archivo Narrow", arial, sans-serif;
}
#nav li a {
display: block;
min-height: 40px;
padding: 10px 25px 0px 25px;
text-decoration: none;
color: #FFFFFF;
}
#nav a:hover {
background-color: #00691e;
}