Question

So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div.

Website: http://www.stingrayimages.ca/

With Z-index: it breaks in IE
Without it it fails in other browsers.

Anyway to fix the dropdown menu without adding z-index to the head div?

#head {
    position:relative;
    height: 140px;
    width: 100%;
    background: #FFF;
    filter:alpha(opacity=93);
    padding-top:20px;
    /* CSS3 standard */
    opacity:0.93;
    -moz-box-shadow: 0 0 5px black;
    -webkit-box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px black;
}

Answer 1

You need to lessen the opacity. The drop down is washing out when it is displayed over the images and that is making it look like it is behind the pictures.

Also, IE9 shows the same problem as Chrome and FireFox 4.