我无法弄清楚如何正确显示导航栏。我需要在相对上设置包含导航栏的div，否则背景上的滑动图像会覆盖导航栏，因此当悬停在其上时，这会使所有导航栏遍布整个地方。任何人都知道如何解决它？
<html lang ="en-US">
<head>
<link rel="stylesheet" type="text/css" href="CSS/main1.css" media="all">
<link rel="stylesheet" type="text/css" href="CSS/slide.css" media="all">
<meta charset="UTF-8></meta>
<meta name="viewport" content="width=1150,user-scalable=yes,initial-scale=2.5,maximum-scale=5.0, minimum-scale=1.0"></meta>
<title> MOLEX </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
position: fixed;
width:100%;
height: 100%;
top:0px;
left:0px;
z-index:0;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
<div class="container">
<div class="dropdown">
<button class="dropbtn">News</button>
<div class="dropdown-content">
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Notice & Policy</button>
<div class="dropdown-content">
<div class="div3">
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Workflow & MIS</button>
<div class="dropdown-content">
<div class="div2">
</div>
</div>
</div>
<div class="dropdown">
<img src="css/molex.png" alt="molex" height="40" width="155">
</div>
<div class="dropdown">
<button class="dropbtn">Canteen</button>
<div class="dropdown-content">
<div class="div1">
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Activity & Organization</button>
<div class="dropdown-content">
<div class="div1">
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Culture</button>
<div class="dropdown-content">
<div class="div1">
</div>
</div>
</div>
</div>
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<img src="1.jpg" alt="molex" height="100%" width="100%">
</div>
</li>
<li><span>Image 01</span>
<div>
<img src="2.jpg" alt="molex" height="100%" width="100%">
</div></li>
<li><span>Image 01</span>
<div>
<img src="3.jpg" alt="molex" height="100%" width="100%">
</div></li>
</ul>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
body {background: url(molex-1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
.container {
overflow: visible!important
background-color: lightgray ;
background-size: cover;
width:auto;
font-family: Arial;
margin-left: 17%;
margin-right:22%;
margin-top: 20px;
text-align: center;
position: relative;
z-index: 9999;
}
.container a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown1{
float: left;
overflow: hidden;
margin-left:13%;
margin-top: 14px;
}
.div1 {
width: 850px;
height: 400px;
border: 1px solid red;
display: block;
float:right;
background-color: lightgray;
opacity: 0.6;
width: 500px;
}
.div2 {
width: 850px;
height: 400px;
border: 1px solid red;
display: block;
background-color: lightgray;
opacity: 0.6;
}
.div3 {
display:none;
height: 20px;
width: 100px;
background-color: white;
top: 100px;
left: 100px;
z-index: 20;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover, .dropdown:hover .dropbtn {
background-color: #FF7575;
}
.dropdown-content {
display: none;
min-width: 160px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.jpg);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.jpg);
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.jpg);
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/5.jpg);
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/6.jpg);
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
animation-delay: 30s;
}
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
}