所以我试图使用Bootstrap和视差元素从头开始为我的组织设计一个网站。我在网上发现了这个演示，我想要做的就是添加一个导航栏，其中一个按钮带有一个悬停的下拉菜单。我按照Bootstrap网站上的说明进行操作，并且点击页面上的栏很容易，但是没有出现悬停下拉菜单，或者如果我确实得到了下拉菜单中的栏，它就会搞砸了，将它放在右边。似乎存在Z轴问题？或导航栏的容器不是让我有一个很好的下拉菜单。以下是我到目前为止：
<!DOCTYPE html>
<!-- saved from url=(0060)https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm -->
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
body,
html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.nav {
background-color: #333;
font-family: Arial;
}
.nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
position: relative;
z-index: 9999999;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
display: block;
}
.dropdown-content a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:last-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:first-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a {
width: 210px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.parallax-header {
/* The image used / background-image: url("header.jpg"); / Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("vsa2017.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("culturedance.png");
min-height: 400px;
}
.bgimg-3 {
background-image: url("culturedance.png");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1,
.bgimg-2,
.bgimg-3 {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div class="nav">
<a href="#home">About</a>
<div class="dropdown">
<a href="#">Pillars</a>
<div class="dropdown-content">
<a href="family.html">Family</a>
<a href="culture.html">Culture</a>
<a href="diversity.html">Diversity</a>
<a href="cpp.html">Philanthropy</a>
</div>
</div>
<a href="officers.html">Officers</a>
<a href="sponsors.html">Sponsors</a>
<a href="contact.html">Contact</a>
<a href="https://www.facebook.com/gmu.vsa?fref=ts"><i class="fa fa-facebook-square"></i></a>
<a href="https://www.instagram.com/gmuvsa/"><i class="fa fa-instagram"></i></a>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">SCROLL DOWN</span>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">Parallax Demo</h3>
<p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero
ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque
non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis,
ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">COOL!</span>
</div>
</div>
</body>
</html>
我相当新，需要学习，任何帮助将不胜感激/
答案 0 :(得分：1)
此解决方案：
在类名.dropdown-content css：
top: 100%;
background: #333;
新的更新样式是“.dropdown”
将样式替换为display:inline-block;到float:left;
<!DOCTYPE html>
<!-- saved from url=(0060)https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm -->
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
body,
html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.nav {
background-color: #333;
font-family: Arial;
}
.nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float:left;
position: relative;
z-index: 9999999;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
background: #333;
}
.dropdown-content a {
display: block;
}
.dropdown-content a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:last-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:first-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a {
width: 210px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.parallax-header {
/* The image used / background-image: url("header.jpg"); / Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("vsa2017.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("culturedance.png");
min-height: 400px;
}
.bgimg-3 {
background-image: url("culturedance.png");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1,
.bgimg-2,
.bgimg-3 {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div class="nav">
<a href="#home">About</a>
<div class="dropdown">
<a href="#">Pillars</a>
<div class="dropdown-content">
<a href="family.html">Family</a>
<a href="culture.html">Culture</a>
<a href="diversity.html">Diversity</a>
<a href="cpp.html">Philanthropy</a>
</div>
</div>
<a href="officers.html">Officers</a>
<a href="sponsors.html">Sponsors</a>
<a href="contact.html">Contact</a>
<a href="https://www.facebook.com/gmu.vsa?fref=ts"><i class="fa fa-facebook-square"></i></a>
<a href="https://www.instagram.com/gmuvsa/"><i class="fa fa-instagram"></i></a>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">SCROLL DOWN</span>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">Parallax Demo</h3>
<p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero
ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque
non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis,
ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">COOL!</span>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
这里你去...
我对你的代码做了一些修改
试着理解，如果你没有得到任何东西，不介意评论它我没有做任何更改，所以说得很清楚
<!DOCTYPE html>
<!-- saved from url=(0060)https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm -->
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
body,
html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.nav {
background-color: #333;
font-family: Arial;
}
.nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
position: relative;
z-index: 9999999;
}
.dropdown-content {
display: none;
position: absolute;
background: #333;
z-index: -1;
}
.dropdown-content a {
display: block;
}
.dropdown-content a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:last-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:first-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a {
width: 210px;
color: #fff;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.parallax-header {
/* The image used / background-image: url("header.jpg"); / Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("vsa2017.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("culturedance.png");
min-height: 400px;
}
.bgimg-3 {
background-image: url("culturedance.png");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1,
.bgimg-2,
.bgimg-3 {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div class="nav">
<a href="#home">About</a>
<div class="dropdown">
<a href="#">Pillars
<div class="dropdown-content">
<a href=""></a>
<a href="family.html">Family</a>
<a href="culture.html">Culture</a>
<a href="diversity.html">Diversity</a>
<a href="cpp.html">Philanthropy</a>
</div>
</a>
</div>
<a href="officers.html">Officers</a>
<a href="sponsors.html">Sponsors</a>
<a href="contact.html">Contact</a>
<a href="https://www.facebook.com/gmu.vsa?fref=ts"><i class="fa fa-facebook-square"></i></a>
<a href="https://www.instagram.com/gmuvsa/"><i class="fa fa-instagram"></i></a>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">SCROLL DOWN</span>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">Parallax Demo</h3>
<p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero
ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque
non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis,
ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">COOL!</span>
</div>
</div>
</body>
</html>