I don't want to get too involved in debugging your custom CSS themes, but it does look like the CSS that you've added to show/hide the menus does have a few problems.
I find that it's impossible to get to the sub-menu items as the menu closes itself before I can get the mouse pointer over a sub-menu item. I believe this is caused by the main content being "on top" of the menu - in particular the main H1 for the page. This is why the menu doesn't pop up when you hover over the bottom part of the menu item, only the top part. (try increasing the top margin for H1 in your css to 100px or so, and you'll see the menu works much better!)
As for the menu items opening underneath items on the page - which items are causing the problem as I don't see this? I expect it's something to do with the z-index that you are choosing for the popup menus. Though these can be rather tricky to get right in my opinion, not least due to bugs in various browsers!
Thanks Joe - I'll have a play around. Could yuou recommend any good CSS resources such as websites or books? I'm also going to look at some CSS training too.
I rely heavily on the Firebug and Web Developer Add-Ons for Firefox. They seem to be excellent for helping to fix and debug CSS.
I don't know if there are any great teaching sites for CSS - though once you have a basic understanding I would recommend the w3schools site as a good reference:
Joe - Voice Admin