0
所以我試圖從頭開始使用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>我是相當新的，需要學習，任何幫助將不勝感激/
非常感謝！正是我在找什麼，如果我需要移動支柱按鈕使它更接近其他按鈕，我使用.dropdown CSS中的填充？ – gildartsv09
沒想到我想通了 – gildartsv09
好的np，只是更新下面的CSS： .dropdown { float：left; 位置：相對; z-index：9999999; } 放浮標：左而不是顯示：inline-block; 檢查更新的答案 –