css transparency and layer sequence problems

Hi There,
I am building a site using CSS and am running into two problems:
here is the URL: www.kohlrbaby.com/kohlrnew/demo.htm

1)In my main nav bar i'm using dropdowns on the catalogue tab. However, when it drops down it is transparent and shows the stuff under it. I have changed the background-color to white and it is still coming up as transparent! Any ideas on another command I should be using?

I have included applicable portion of css file at bottom of this.

2) the layer order is not correct as the drop down is going behind the photo, i'm also not sure how to fix this. Any suggestions would be welcome!!!

Thanks
Jill

Applicable css code to problem 1):

#mainMenu {

text-align: center;
color: #000;
margin: 0px;
padding: 0px 0px 0px 0px;
}

#menuList {
margin: 0px;
padding: 0px;
}

#menuList ul {
margin: 0px;
padding: 0px;
}

#menuList li {
display: inline;
list-style: none;
}

a.actuator {
background-color: transparent;
color: #000;
font-size: 9px;
margin: 0px;
padding: 0px 0px;
text-decoration: none;
}

a.actuator:hover {

color: #958550;
}

.menu {
color: #000;
background-color: #FFFFFF;
border: 1px solid #CCC;
position: absolute;
visibility: hidden;
}

.menu li a {
background-color: #ffffff;
color: #000;
display: block;
font-size: 9px;
line-height: 1.75em;
margin: 0px;
padding: 0px 10px;
text-decoration: none;
}

.menu li a:hover {
background-color: #7C8895;
color: #EEE;
}

span.key {
text-decoration: underline;
}

#homeMenu { width: 100px; }
#catalogueMenu { width: 100px; }
#wholesaleMenu { width: 100px; }
#wheretobuyMenu { width: 100px; }
#contactMenu { width: 100px; }

adding a z-index to .menu fixed it in mozilla.

.menu {
z-index:1;
}

Thanks for that! It is currently working in Netscape and Mozilla, however, it is still misbehaving in IE......

it seems I"m having problems with IE only......PLEASE PLEASE does anybody have any tricks to fix this?

Thanks