Dropdown menu collide with an image

Question

I've created a simple CSS drop down menu, problem is that I have a image gallery and when I hover on the menu on the area where the image is the image takes the focus and not the menu. Any advice how to solve it? Z-Index maybe?

Here is the problematic page

Answer 1

z-index definitely.

#menu{
  z-index: 2;
}

#gallery{
  z-index: 1;
}

I've also noticed your utilizing large amounts of opacity. when two semi-transparent elements overlap, both of their colors will be affected.

tip: try using a thumbnail genertor for those images, they take a while to load

Good Luck! -Brian

Answer 2

#nav ul li {z-index: 9;}

seems to work.