Verschiedene HTML-Seiten mit gleichen Codes sehen ganz anders aus

Question

Ich brauche dringend Hilfe, da ich einige Probleme mit meiner Navigationsleiste habe. Einer meiner Buttons ist ein Drop-down-Menü, aber mein Drop-Down-Inhalt steckt im Nav fest und ich möchte, dass er direkt darunter fällt.

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()">&#9776;</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:Jydskm@gmail.com 
 
    </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>

Answer 1

Sie haben ein <li> Elemente ohne vorhergehende <ul> Element. Das ist das erste, was ich an deinem Nav-Menü wahrnehme. Sie haben auch eine Reihe von Inline-Stilen, aber Sie haben auch ein externes CSS-Dokument? Es sieht so aus, als ob Sie etwas über die grundlegende Syntax von HTML und CSS nachdenken müssen. Sie verlinken auf ein W3 Schools Stylesheet, also nehme ich an, dass Sie mit dieser Seite vertraut sind. Verwenden Sie Google und suchen Sie nach einem geeigneten Dropdown-Menü mit HTML und CSS. Ich garantiere, dass es eines der ersten zwei oder drei Ergebnisse sein wird. Stack Overflow sollte wirklich verwendet werden, wenn Sie bereits ein wenig recherchiert haben und nicht die richtige Antwort erhalten.