Attempting mouseover submenu

Howdy
Am new round these parts so please forgive me if I'm making some HUGE noobish error.

Basically I am fairly new to web design, (www.tidworthtaekwondo.com) and want to add some form of sub menu when you mouseover a couple of the main menu items. I've searched high and low on the internet but can only find examples where the menu design is already set, obviously I want it to fit with what I have already designed.
Slaved away this afternoon doing all sorts and when I created separate hidden buttons I couldn't get them to appear in the right place; when I added them as part of the current menu (but hidden) they left a huge 'hidden' gap in their place.

It's driving me insane and I'd really appreciate any advice or nudges in the right direction.

x

I've searched high and low on the internet but can only find examples where the menu design is already set, obviously I want it to fit with what I have already designed.http://htmldog.com/articles/suckerfish/dropdowns/ is a good resource to learn building a drop down menu.

Thanks this worked like a charm! Just wish I'd asked before the 12 hours of googling...
:D

But I can't see any drop down effects on your site. And you have got some error in the nesting of ul-li tags, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tidworthtaekwondo.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

PS: The validation errors in your javascript can be eliminated by adding CDATA comments, see http://javascript.about.com/library/blxhtml.htm