Alright, let's see... first step get it into a MODERN doctype so you are no longer in transition from 1997 to 1998... get the CSS into a separate file so we're testing 'real world', can have proper media types, and of course can actually edit CSS alongside the HTML instead of not being able to see both at the same time... (I really think the STYLE tag should be made obsolete), cut out the excess markup that isn't doing anything... drop the presentational 'rounded' class...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<li><a href="#">menu item1</a></li>
<li><a href="#">submenu2 item1</a></li>
<li><a href="#">submenu2 item2</a></li>
<li><a href="#">submenu2 item3</a></li>
Ok, in the cSS, remove the 'reset' part that's not resetting anything... remove the pointless height declarations (though with you setting the centering and width I would suspect the page this is going into has 'issues'... like being a crappy fixed width and probably declaring width dozens of times for what could be done once), remove the fixed width on the li since that usually looks like rubbish once you have real data in there....
Here's what I came up with:
As with all my examples the directory:
is open for easy access. I used the 'overflow' technique instead of sliding the APO around because it's just far, far simpler to deal with. There's a thread about it here:
I wasn't entirely certain where you were trying to position the hovers so I took a wild guess...
In the CSS:
I went a wee bit overboard on the commenting to make it clear the how/what/why of it. This approach should work well all the way back to IE 5.5 if you throw a behavior file in there for those browsers like peterned's hover-anywhere... if you don't care about IE6/earlier, it's fine as is.
Hope this helps.