Question

由于导航栏出现问题，我非常需要帮助。我的一个按钮是下拉列表，但是我的下拉内容卡在导航栏内部，我希望它在它下方下降。

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

您有<li>个元素，但没有前面的<ul>元素。这是我真正注意到导航菜单的第一件事。你也有一堆内联样式，但你也有一个外部CSS文档？看起来您需要对HTML和CSS的基本语法进行一些研究。您链接到W3学校样式表，因此我假设您熟悉该站点。使用Google搜索如何使用HTML和CSS创建正确的下拉菜单。我保证它将是前两个或三个结果之一。 Stack Overflow应该用于你已经完成一些研究而无法得到你正在尝试做的答案。

具有相同代码的不同HTML页面看起来完全不同

1 个答案: