JQuery Menu falls behind a JQuery image gallery in IE7 only

Hi Experts!

I could use some advice. I'm using the jQuery Multi Level CSS Menu #2- By Dynamic Drive along with a jQuery image gallery created by Mead Miracle: http://www.meadmiracle.com/SlidingGallery.aspx. In IE7 ONLY, the menu falls behind the image gallery.  You can see an example here:  http://dzinentertainment.com/

I thought this should be a fairly simple z-index issue, but I can't get this resolved. I pasted the CSS below that pertains to the menu. I looked around the forums here and tried some ideas that others have suggested with no luck. The gallery file makes numerous references to z-index so I'm not sure if the real fix would be there, but my jQuery knowledge is pretty limited.  

Here's what I have tried:
1. Changing the z-index here: .jqueryslidemenu{position:relative;z-index:25;} from 25 up to 9999999999
2. The gallery is  in a div #content .gallery - so I tried setting the position to relative and the z-index to -10, but when I set it to ANY negative number the gallery stops functioning. This DOES fix the problem in IE7 except that the gallery no longer works. :(
3. I made sure that #content .gallery came AFTER the styles for the menu
4. I tried playing around with zoom:100%
5. I tried adding position:relative;z-index:999 to several of the menu pieces, other than the main .jqueryslidemenu
6. I saw a post on EE about bgiframe: http://plugins.jquery.com/project/bgiframe
But it looked a little complicated to me, so I thought I'd check here first to see if anyone thought that might be an option to try.

So, I guess I wondered if anyone else had any ideas. I would really appreciate any thoughts. I can attach the jquery.slidingGallery-1.2.js if that would be helpful, but I wasn't sure if it was.

Might anyone have any thoughts? The menu works perfectly fine in FF, Safari, Chrome and IE8.

.jqueryslidemenu{
position:relative;
z-index:25;}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;}

.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;}

.jqueryslidemenu ul li a, .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color:#999999;}

.jqueryslidemenu ul li a:hover {
color:#777777;}

.jqueryslidemenu ul li a{
display: block;
padding: 10px 10px; 
text-decoration: none;
height:40px;
line-height:40px;
overflow:hidden;
padding:0 18px;}

* html .jqueryslidemenu ul li a{ 
display: inline-block;}

.jqueryslidemenu ul li ul{
position: absolute;
left: 0px;
display: block;
visibility: hidden;}


.jqueryslidemenu ul li ul li{
display: list-item;
float: none;}

.jqueryslidemenu ul li ul li ul{
top:0px;}

.jqueryslidemenu ul li ul li a{
width: 160px;
padding: 6px 13px;
margin: 0;}

.jqueryslidemenu ul ul{
background:transparent url(images/drop.png) no-repeat scroll -1px 0;
padding-top:14px;
top:30px;
padding-bottom:2px;}

.jqueryslidemenu ul ul.menu_flip{	
background:transparent url(images/dropR.png) no-repeat scroll -1px 0;}

.jqueryslidemenu ul ul ul, .jqueryslidemenu ul ul.menu_flip ul{
background:transparent url(images/drop_sub.png) no-repeat scroll 0px -2px;
margin-left:-4px;
margin-top:-2px;
padding-top:2px;}

.jqueryslidemenu ul ul li a, .jqueryslidemenu ul ul li a:link, .jqueryslidemenu ul ul li a:visited {
height:100%;
line-height:20px;}

.jqueryslidemenuz ul li ul li a:hover, .jqueryslidemenu ul ul li a:hover{
margin:0 4px;
padding:6px 9px;
background:#222;color:#eee;}

.jqueryslidemenuz ul ul li ul li a:hover, .jqueryslidemenu ul ul ul li a:hover{
margin:0 1px;
padding:6px 12px;
width:155px;}

------------

#content .gallery{top:0px; left:0px; width:990px; height:300px;}

Select allOpen in new window