I'm creating a vertical drop-down menu in CSS. Two of the five categories: SERVICES and ABOUT US each contain a list; however, those lists don't align with their category, instead, they appear below the last category (CONTACT). I'm not sure what I've done wrong or what's missing, maybe it's really simple and I've just been looking at it too long. I'm attaching the code from the CSS and the index page. Any help is appreciated.

From CSS:

#navigation {
width: 12em; /* set navigation width*/
font-family: "Trebuchet MS", Arial, Helvetica, Verdana, Helvetica, sans-serif;
font-size: large;
font-weight: bold;
font-color: #002266;
}

#navigation ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

#navigation a { /* style, color and size links and headings */
display: block;
margin: 0;
padding: 9px;
width: 100%;
color: #002266;
background: #00B294;
text-decoration: none;
}

#navigation a:hover {
color:
background:
}

#navigation li:hover ul {
display: block;
top: 76px;
}

#navigation li { /* make the list elements; a containing block for nested lists */
left: -38px;
top: 76px;
position: relative;
list-style: none;
float: left;
font-size: 95%;
font-color: #002266;
width: 165px;
font-size: 100%;
padding: 0;
}
#navigation ul {
font-size: medium;
font-color: #002266;
float: right;
position: absolute;
margin-left: 28px;
display: none;
left: 100%; /* to position to the right of containing block */
width: 100%; /* width based on containing block */
}

#navigation a:link, #navigation a:visited {
display: block;
text-decoration: none;
padding-left: 1em;
font-color: 002266;
}


From INDEX:

<!-- Start Left Column -->
<div id="leftcolumn">
<ul id="navigation" >

<li><a href="index.html">Home</a>
</li>
<li><a href="services.html">Services</a>
</li>
<ul>
<li><a href="">Reiki</a></li>
<li><a href="">Readings</a></li>
<li><a href="">Healing</a></li>
<li><a href="">Animal Communication</a></li>
<li><a href="">Mediumship</a></li>
<li><a href="">Medical Intuitive</a></li>
<li><a href="">Past Life Retrieval</a></li>
</ul>
</li>
<li><a href="about.html">About Us</a>
<ul>
<li><a href="">Claire</a></li>
<li><a href="">Teri</a></li>
<li><a href="">Barbara</a></li>
</ul>
</li>
<li><a href="events.html">Events & Galleries</a>
</li>
<li><a href="contact.html">Contact</a>
</li>
</ul>
</div> <!-- End leftcolumn -->