当在纯CSS下拉菜单下面引入jQuery旋转木马时，它会出现z索引问题

我有一个纯CSS下拉式导航菜单，它本身就可以正常工作，但是当我在导航菜单下面介绍Elixon Theatre 2.5（一个购买自的3D ish jQuery图像旋转木马）时，我得到了一个

z-index

类型的问题。当我将鼠标悬停在与转盘重叠的第一个下拉菜单

元素上时，两个下拉菜单（类和职员）就会消失。我试图使父级

的

z-index

高于旋转木马的

z-index，但似乎不起作用。有什么想法吗

可在此处找到该页面：

以下是导航菜单的CSS：

#navbar {
    background-color: #666;
    box-shadow: 0px 10px 14px rgba(255, 255, 255, 0.2) inset,
                0px -3px 14px rgba(0, 0, 0, 0.5) inset;
    height: 30px;
    position: relative;
    z-index: 1100;
}
ul#nav {
    list-style: none;
    display:inline;
    margin: 0;
}
ul#nav li {
    float: left;
    position: relative;
    z-index: 1001;
}
ul#nav li a {
    display: block;
    color: #fff;
    font-size: 0.9em;
    font-weight: normal;
    height: 30px;
    line-height: 200%;
    padding: 0 20px;
}
ul#nav ul {
    background-color: rgba(68, 68, 68, 0.8);
    font-size: .85em;
    list-style: none;
    position: absolute;
    padding: 10px 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    left: -99999px;
    opacity: 0; 
    filter:alpha(opacity=0);
    transition: opacity .7s ease-in-out;
    -moz-transition: opacity .7s ease-in-out;
    -webkit-transition: opacity .7s ease-in-out;
    -o-transition: opacity .7s ease-in-out;
}
ul#nav ul li {
    float: none;
    height: 24px;
}
ul#nav li:hover a {
    color: #8fc73e;
}
ul#nav li:hover ul li a {
    color: #fff;
    white-space: nowrap;
    padding: 0 20px;
    min-width: 70px;
}
ul#nav li:hover ul {
    left: 0px;
    opacity: 1;
    filter:alpha(opacity=100);
}
ul#nav li:hover ul li a:hover {
    background-color: #457895;
    height: 24px;
}

以下是HTML：

<div class="grid_12" id="navbar">
    <ul id="nav">
        <li><a id="nav-home" href="index.html">home</a></li>
        <li><a id="nav-classes" href="javascript:void(0);">classes</a>
            <ul>
                <li><a href="classes/art.html">art</a></li>
                <li><a href="classes/dance.html">dance</a></li>
                <li><a href="classes/pilates.html">pilates</a></li>
                <li><a href="classes/theatre.html">theatre</a></li>
                <li><a href="classes/tumbling.html">tumbling</a></li>
                <li><a href="classes/voice.html">voice</a></li>
           </ul>
        </li>
        <li><a id="nav-staff" href="javascript:void(0);">staff</a>
            <ul>
                <li><a href="staff/AdrienneBranson.html">Adrienne Branson (dance/pilates)</a></li> 
                <li><a href="staff/CharissaCoyle.html">Charissa Coyle (art)</a></li>
                <li><a href="staff/ChristiMitchell.html">Christi Mitchell (theatre)</a></li>
                <li><a href="staff/KendraMuir.html">Kendra Muir (voice)</a></li>
                <li><a href="staff/KarlaVeltrop.html">Karla Veltrop (tumbling)</a></li>
            </ul>
        </li>
        <li><a id="nav-calendar" href="calendar.html">calendar</a></li>
        <li><a id="nav-events" href="events.html">events</a></li>
        <li><a id="nav-gallery" href="javascript:void(0);">gallery</a></li>
        <li><a id="nav-register" href="media/RegistrationForm.pdf" target="_blank">register</a></li>
        <li><a id="nav-contact" href="contact.html">contact</a></li>
    </ul>
    .
    .
    .
</div>
.
.
.

<div id="myGallery" style="visibility: hidden; text-align: center; margin: auto; width: 80%; height: 300px;">
    <a href="images/gallery-01-hires.jpg" target="_blank"><img src="images/gallery-01-lowres.jpg" style="height: 1px;"/></a>
    <a href="images/gallery-02-hires.jpg" target="_blank"><img src="images/gallery-02-lowres.jpg" style="height: 1px;"/></a>
    <a href="images/gallery-03-hires.jpg" target="_blank"><img src="images/gallery-03-lowres.jpg" style="height: 1px;"/></a>
    <a href="images/gallery-04-hires.jpg" target="_blank"><img src="images/gallery-04-lowres.jpg" style="height: 1px;"/></a>
    <a href="images/gallery-05-hires.jpg" target="_blank"><img src="images/gallery-05-lowres.jpg" style="height: 1px;"/></a>
    .
    .
    .
</div>





























.
.
.
.
.
.
.
.
.

下面是Javascript：

<script type="text/javascript">
    $(window).load(function() {
        $("#myGallery").theatre({
            /* other options here */

            controls: "horizontal",
            speed: 2000,
            still: 2000,
            selector: "img",
            effect: "3d"
        });
    });
</script>


$（窗口）。加载（函数（）{
$（“我的画廊”）.剧院({
/*这里还有其他选择*/
控件：“水平”，
速度：2000，
仍然：2000年，
选择器：“img”，
效果：“3d”
});
});

不幸的是，我不能发布jQuery旋转木马代码，因为它是受版权保护的。我希望仍有人能帮助我。
尝试将此添加到您的CSS中：

#myGallery { z-index: -100; }

我认为您需要将导航和图库放在一个公共分区内。每个分区的样式都带有position:relative，然后为导航和图库定义一个z索引。
我刚刚尝试过，但不幸的是，它没有起作用。我在想#myGallery的子元素的z索引可能会干扰其他任何东西。噢，哇！我犯了一个很大的新手错误！当我做了您建议的更改后，我将其应用于我用于测试的站点的脱机副本，但当我检查它是否有效时，我查看了活动站点。我很抱歉浪费了你们的时间，大家。很高兴你们都弄明白了：）你们是对的。事实上，这就是我已经在做的。我使用960网格系统作为整个事件的容器div。我的问题是一个巨大的新手错误，我现在已经澄清了。很抱歉浪费您的时间，但非常感谢您的帮助！