CSS menu: dropdowns not showing all

CSS menu: dropdowns not showing all

I'm having trouble getting this menu to work properly. The articles and
shows menu should show a dropdown when I hover over the image-text. It
does, but only shows the very last li item instead of the entire list.
Here is the html:
<ul id="mainmenu">
<li id="nav_hom"><a href="index.html">Home</a></li>
<li id="nav_art"><a href="articles.html">Articles</a>
<ul>
<li><a href="cg.html">Cardboard Gamer</a></li>
</ul>
</li>
<li id="nav_show"><a href="shows.html">Shows</a>
<ul>
<li><a href="rez.html">ReZonance</a></li>
<li><a href="dd.html">Dumpster Diving</a></li>
<li><a href="letsplay.html">Let's Play!</a></li>
</ul>
</li>
<li id="nav_abt"><a href="about.html">About</a></li>
<li id="nav_con"><a href="contact.html">Contact</a></li>
</ul>
And here is the relevant CSS:
#mainmenu{position:relative; list-style-type:none; width:800px;
height:50px; margin:0; padding:0; background: url(menu.png) no-repeat;}
#mainmenu li a{position:absolute; margin:0; padding:0; display:block;
height:50px; background: url(menu.png) no-repeat; text-indent:-9999px;
overflow:hidden; font-size:1%;}
#mainmenu li:hover ul {display:block; position:relative; top:50px;}
#mainmenu ul {list-style-type:none; /*display:none;*/ z-index:999;}
#mainmenu ul li a {z-index:999; overflow:visible; height:25px;
width:160px; background:#C78120; border-top-style:solid;
border-bottom-style:solid; border-width:1px; border-color:#000000;
display: block; padding:2px; font-size:14px; text-indent:1em;
text-decoration:none; color:black;}
#mainmenu ul li:hover a{background:#9e0b0f;}
li#nav_hom a{left:0; width:160px; background-position:0 0;}
li#nav_art a{left:160px; width:160px; background-position:-160px 0;}
li#nav_show a{left:320px; width:160px; background-position:-320px 0; }
li#nav_abt a{left:480px; width:160px; background-position:-480px 0; }
li#nav_con a{left:640px; width:160px; background-position:-640px 0; }
li#nav_hom a:hover{background-position:0 -50px;}
li#nav_art a:hover{background-position:-160px -50px;}
li#nav_show a:hover{background-position:-320px -50px;}
li#nav_abt a:hover{background-position:-480px -50px;}
li#nav_con a:hover{background-position:-640px -50px;}
The second block of CSS is just there to adjust the positioning of the
menu image and shouldn't be affecting the dropdown parts of it, but I
included it in case. The closest I've gotten to making it work is:
#mainmenu ul li {height:25px;}
Which shows all the li items, but then screws up the positioning of the
other links in the menu.
#mainmenu ul li {position:absolute;}
This makes the dropdown show up in the right spot and doesn't break the
main menu, but doesn't show all the li items. This is so frustrating. Any
help? Thanks.