我正在写一个网站的主页，我想在该主页上随着用户浏览页面而在后台自动滚动显示图像。我已经成功实现了jQuery插件，但是将鼠标悬停在导航栏上时，下拉菜单将显示在幻灯片的后面。我如何在幻灯片放映的背景中显示下拉菜单？ 另外，对下拉列表的任何改进建议都值得赞赏，因为当前将鼠标悬停在隐藏列表本身上时，不仅悬停在链接上（这就是我想要的）。 这是html：
<ul class="main-list">
<li><a href="#">About</a>
<ul>
<li><a href="#">Laboratory</a></li>
<li><a href="#">Evaluations</a></li>
<li><a href="#">Research</a></li>
</ul>
</li>
<li><a href="#">Staff</a>
<ul>
<li><a href="#">Academic Staff</a></li>
<li><a href="#">Graduates</a></li>
<li><a href="#">Yearbooks</a></li>
</ul>
</li>
<li><a href="#">Announcements</a>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Announcements</a></li>
</ul>
</li>
<li><a href="#">Events</a>
<ul>
<li><a href="#">Visits</a></li>
<li><a href="#">Lectures</a></li>
<li><a href="#">Contests</a></li>
<li><a href="#">Chemistry Events</a></li>
<li><a href="#">Fire Department</a></li>
</ul>
</li>
<li><a href="#">Apps</a>
<ul>
<li><a href="#">Ptyx</a></li>
</ul>
<li><a href="#">Courses</a>
<ul>
<li><a href="#">MSc.</a></li>
<li><a href="#">Undergraduates</a></li>
</ul>
<li><a href="#">Links</a>
<ul>
<li><a href="#">Contact Information</a></li>
<li><a href="#">Open Day Visits</a></li>
</ul>
<li><a href="#">Publications</a>
<ul>
<li><a href="#">Student Guides</a></li>
<li><a href="#">FEK</a></li>
</ul>
</li>
</ul>
</nav>
<div class="show">
<div id="slider">
<a href="#" class="control_next">></a>
<a href="#" class="control_prev"><</a>
<ul class="slide">
<li><img src="img/og1.jpg" width="600" height="600"></li>
<li style="background: #333;"><img src="img/κατάλογος.png" width="600" height="600"></li>
<li><img src="img/UoA_Logo.png" width="600" height="600"></li>
<li style="background: #333;"><img src="imgtest.png" width="600" height="600"></li>
</ul>
</div>
</div>
<span class="pad">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</span>
<script>
$('#checkbox').change(function(){
setInterval(function () {
moveRight();
}, 3000);
});
</script>
css：
a{
text-decoration: none;
color: #EAEAEA;
}
#header {
overflow:hidden;
width: device-width;
height: 100px;
border: 200px 241px 200px 200px;
font-size: 40;
font-family: Bookman Old Style;
padding-bottom: 95px;
margin-bottom: 0px;
background: #7195c5e;
background: -moz-linear-gradient(top,rgba(73,155,234,1) 35%,
rgba(73,155,234,1) 65%,rgba(32,124,229,1) 97%,
rgba(0,75,155,1) 100%);
}
#logo{
float:left;
padding-bottom:100px;
margin-top: -75px;
margin-left: 250px;
margin-right: -270px;
}
#main-title{
margin-left: -125px;
}
.header-box {
overflow: hidden;
text-align: center;
padding-top:90px;
font-size: xx-large;
color: white;
margin-left: -50px;
}
.pad{
padding-top: 100px;
padding-bottom: 100px;
}
nav {
position: relative;
width:100%;
height: 45px;
background: #4571EA; /* Old browsers */
background: -moz-linear-gradient(top, #4571EA 0%, #499bea 95%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, top to bottom, color-stop(0%,#4571EA), color-stop(95%,#499bea), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4571EA 0%,#499bea 95%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4571EA 0%,#499bea 95%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4571EA 0%,#499bea 95%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(bottom, #4571EA 0%,#499bea 95%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4571EA', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
padding-top: 5px;
padding-bottom: 5px;
}
nav ul {
margin:0px;
border:0px;
list-style-type: none;
float: left;
}
nav ul li{
float: left;
list-style: none;
position: relative;
padding: 10px 60px 10px 60px;
}
nav ul li ul a{
margin-left: -95px;
padding-left: 0px;
}
nav ul li a{
font-size: 20px;
}
nav ul li ul{
opacity: 0;
position: absolute;
margin-top: 5px;
width: 160px;
background-color: #4F9BED;
border-radius:0px 0px 10px 10px;
background: ##4F9BED; /* Old browsers */
background: -moz-linear-gradient(top, ##4F9BED 0%, #499bea 95%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,##4F9BED), color-stop(95%,#499bea), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, ##4F9BED 0%,#499bea 95%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4F9BED 0%,#499bea 95%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4F9BED 0%,#499bea 95%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom, ##4F9BED 0%,#499bea 95%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4571EA', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}
nav ul li ul li{
display: block;
width: 125px;
line-height: 100px;
}
nav ul li:hover ul{
-moz-transition: opacity 0.5s ease-out;
-webkit-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
opacity: 1;
}
.display{
background-color: white;
height:550px;
padding-bottom: 135px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
还有jQuery：
jQuery(document).ready(function ($) {
setInterval(function () {
moveRight();
}, 2500);
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});