Your menu is added to the page before the image, which means that if they overlap, the image will cover the menu, just as if you added one sheet of paper called "menu" to a table, and then placed a sheet of paper called "image" above the first sheet.
What you need to do is break the exanding submenus out of the ordinary flow and position them on top
/* Selector matches all divs which are
direct child of an li which is
direct child of element with id "menu"
#menu > li > div
{
/* break this out of the ordinary flow */
position: absolute;
/* position this above stuff with lower z-index */
z-index: 5;
}
