-4
我非常需要一些幫助，因爲我的導航欄存在一些問題。我的其中一個按鈕是下拉菜單，但我的下拉內容卡在導航欄內，我希望它下降到正下方。具有相同代碼的不同HTML頁面看起來完全不同
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 4000); // Change image every 2 seconds
}.topnav {
background-color: #ffffff;
overflow: hidden;
position: fixed;
margin-top: -10%;
margin-left: -1%;
margin-bottom: 10%;
width: 110%;
padding-bottom: -3%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 50px 50px;
text-decoration: none;
font-size: 20px;
font-family: Impact, Charcoal, sans-serif;
}
.topnav a:hover {
font-family: Impact, Charcoal, sans-serif;
color: #ff3385;
text-decoration: underline #ff3385;
font-size: 30px;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
li a,
.dropbtn {
display: list-item;
margin text-align: center;
text-decoration: none;
border: none;
outline: none;
color: white;
background-color: inherit;
position: fixed:
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: white;
}
li.dropdown {
display: inline-block;
float: left;
}
.dropdown-content {
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 100;
margin-top: 25%;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
float: left;
}
.logo {
margin-top: 10%;
margin-bottom: -0.75%;
margin-left: 10%;
padding-top: 25px;
position: relative;
}
.mySlides {
display: none;
position: absolute;
margin-left: -9.5%;
margin-top: -27.1%;
margin-right: 10%;
}
.h1 {
font-size: 300%;
letter-spacing: -1px;
text-align: center;
padding-top: 1.5%;
font-family: Impact, Charcoal, sans-serif;
}
h2 {
font-family: Impact, Charcoal, sans-serif;
font-size: 300%;
letter-spacing: 0px;
line-height: 150%;
text-align: center;
text-decoration: underline #ff3385;
color: #ff3385;
}
p {
font-size: 150%;
letter-spacing: 0px;
line-height: 150%;
text-align: left;
text-decoration: none;
color: black;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin-left: 10%;
margin-right: 10%;
}
.møbler {
padding: 1%;
margin-left: 4%;
margin-bottom: 10%;
float: left;
}
footer {
color: black;
background-color: #f1f1f1;
clear: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 15px;
line-height: 200%;
margin-left: 2%;
}<html>
<head>
<title>Herningmøbelengros.dk</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Mastercss.css" />
<script src="newjavascript.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body bgcolor="#f5f5f0">
<header>
<nav>
<div class="topnav" id="myTopnav">
<a href="index.html">Hjem</a>
<a href="side 2.html" class="icon" onclick="myFunction()">☰</a>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Møbler</a>
<div class="dropdown-content">
<a href="#">Borde</a>
<a href="#">Stole</a>
<a href="#">Skabe</a>
</div>
</li>
<a href="side 3.html">Om os</a>
</div>
</nav>
</header>
<div class="logo">
<img src="LOGO.PNG" alt="Herning Bolig engros møbler" align="center" style="width:30%" />
</div>
<section>
<div class="w3-content w3-section" style="max-width:100px">
<img class="mySlides" src="førsøgsbillede.jpg" style="width:53.3%" />
<img class="mySlides" src="førsøgsbillede 2.jpg" style="width:53.3%" />
<img class="mySlides" src="førsøgsbillede 3.jpg" style="width:53.3%" />
</div>
</section>
<h1 class="h1">Køb stort - betal småt</h1>
<hr>
<footer>
<div style='float:left; width:30%'>
<strong>Kontakt</strong> <br>Telf: +45 21 42 28 99<br> Email:[email protected]
</div>
<div style='float:left; width:30%; margin-left:30px'>
<strong>Lokation</strong> <br>Find os på Industrivej Syd 1B<br> 7400 Herning
</div>
<div style='float:left; width:30%; margin-left:30px'>
<strong>Åbningstider</strong> <br>Ons-fre 10.00-17.00<br> Lør-søn 10.00-16.00
</div>
</footer>
</body>
</html>
我認爲你需要澄清你的問題實際上是什麼。 – Carcigenicate
直到最後一刻才做功課的事實與SO無關。他們來的時候會有答案，而不是按照你的時間表。請參閱https://meta.stackoverflow.com/q/334822/215552 –