Nested Menu Displaying Too Low

[JackD4ME]

I am new to css and am trying to put together a menu. I have spent days surfing w/lots of trial and error. What I now have is a working menu model. It has 4 list items with 3 nested list items. The nested items when hovering display at the bottom of the parent node. All of the coding has been from tutorials with personal tweaking. Does anyone know why this is?

------------------------------------------------------------------------
Here is the css
------------------------------------------------------------------------
/*Main Menu Attributes*/
#navmenu {
width: 125px;
margin: 20px 0 0 0;
}

#navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, sanf-serif;
font-size: 12px;
}

#navmenu a {
display: block;
width:120px;
padding: 2px 2px 2px 10px;
color: #000000;
border-top: 1px solid #808080;
border-left: 1px solid #808080;
border-right: 0px solid #C0C0C0;
border-bottom: 0px solid #C0C0C0;
text-decoration: none;
background-image: url(menubg1.gif);
filter:blendTrans(duration=0.2);
}

#navmenu a:hover {
border: 1px solid #000000;
background-image: url(menubg.gif);
border-top: 0px solid #C0C0C0;
border-left: 0px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
border-bottom: 1px solid #C0C0C0;
color: #ffffff;
}

/*Nested Menu Attributes*/
#navmenu li ul {
position: absolute;
float: right;
display: none;
left: 132px;
}

#navmenu li:hover ul {
display: block;
border: 1px solid #ccc;
border-bottom: 1;
background-image: none;
background: #F1F1F1;
top: auto;
}

------------------------------------------------------------------------
Here is the menu code
------------------------------------------------------------------------
<div id="navmenu">
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a>
<ul>
<li><a href="#">nest 1</a></li>
<li><a href="#">nest 2</a></li>
<li><a href="#">nest 3</a></li>
</ul>
</li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>

Thanks,
Jack