One thing I notice is that you have the header div overflow set to 'hidden'. I think this may need tobe set to 'visible' to allow the second level menu to fly out.
I'm a bit confused about the order and floats of the divs contained in the header, and their css properties.
It would probably be easiest to clear the header of nested divs, and insert a rebuilt menu as an include. You could save the contents of the mainNavigation div (links & hierarchy) to a text file, and paste it back in when you've done. This would save a lot of time (in the long run) if you need to add to the menu site-wide.