[SOLVED] Trouble positioning menu

[Eiolon]

New to CSS so bear with me.

 

I am trying to position my menu 5 pixels down from the top and 5 pixels from the left.  Here is my code (which is probably totally off, mind you):

 

html,body {
background-color: #FFF;
margin: 0px;
}

#navigation a {
position: absolute:
top: 5px;
left: 5px;
color: #FFF;
background: #2C3B42;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
padding: 5px;
margin: 2px;
}

#navigation ul {
list-style: none;
}

#navigation li {
float: left;
} 

 

The menu:

 

<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Finance</span></a></li>
<li><a href="#"><span>Resources</span></a></li>
<li><a href="#"><span>Contacts</span></a></li>
</ul>

 

The problem is each item is layered on top of each other.  If I change the position to relative, it does not layer them but it does not position the menu 5px from the top and 5px from the left.

 

Any suggestions?  Thanks!

[Eiolon]

I noticed I forgot to create the container, which solves the problem.