Place Children of a Menubar With background Image below THe Background Image in HTML

I made a menu bar with sub children and I'm trying to place the sub children below the menubar like layers not for positioning. I think the problem is that my menu bar has a background image and I cant put its children below that. Is there a workaround for this? Thanks I've added some code below

ul#mainNav {
    padding: 0;
    margin: 0;
    position: relative;
    width: 980px;
    background: transparent url(images/mainNavbar.png) no-repeat top center;
    margin: 0 auto;
    float: left;
    z-index: 100;
}
ul#mainNav li {
    list-style: none;
    margin: 0 25px;
    display: inline;
    height: 40px;
    line-height: 40px;
    position: relative;
}
  ul#mainNav ul {
display: block;
list-style: none;
font-size: 100%;
cursor: default;
position: absolute;
width: 160px;
z-index: -1;
background-color: #c32c19;
-moz-box-shadow: #000 1px 1开发者_运维技巧px .4em;
-webkit-box-shadow: #000 1px 1px .3em;
-o-box-shadow: #000 1px 1px .4em;
}

link below:

http://jsfiddle.net/s96Eh/1/

Thanks for your clarification.. here's an updated JSfiddle

It doesn't work in IE7, but that's a hasLayout issue with stacking order and I'm not sure that it's even "fixable" however it just means it still appears above

ooops.. forgot, hover over the word "families" I put in a CSS hover toggle