-4
私はナビゲーションバーにいくつかの問題があるので、私は非常に助けが必要です。私のボタンの1つはドロップダウンですが、私のドロップダウンの内容はnavの中に詰まっていて、その下にドロップしたいと思っています。同じコードの異なる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を参照してください。 –