我有一个纯 CSS 下拉导航菜单，它本身就可以正常工作，但是当我在导航菜单下方介绍 Elixon Theatre 2.5（从http://www.webdevelopers.eu购买的 3D-ish jQuery 图像轮播）时，我遇到了一个z-index问题。<li>当我将鼠标悬停在与轮播重叠的第一个下拉元素上时，两个下拉菜单（班级和员工）就会消失。我尝试使z-index父级的<ul>值高于旋转木马的值，但似乎没有用。有什么想法吗？
该页面可以在这里找到：www.washmoarts.com/gallery.html
这是导航菜单的 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>
不幸的是，我不能发布 jQuery 轮播代码，因为它受版权保护。我希望有人仍然可以帮助我。