css horizontal menu help with overlap

I have a css horizontal drop-down menu at http://www.lyndabaxter.com/gr/home4.html . The sub-menu works fine when I DON'T push it down to overlap the large rotating image below. But when I push the menu down with a margin-top then I am not able to rollover/click on the sub-menu. The sub-menu disappears before I get a chance. Any ideas how I might solve this? I 've tried using z-index but it didn't seem to work unless I was using it incorrectly??

Thanks for any help