我添加了一个下拉导航，现在其他内容一直在下拉菜单中

Question

我在我的网站上添加了下拉导航。下拉菜单本身工作正常，但是当我向侧面添加新内容时，例如只有一些段落，新内容出现在下拉菜单中。我已经包含了代码，请给我任何反馈。我是 Web 开发的新手，所以不要太苛责我。

html{
    background: url(background.jpg) no-repeat center fixed;
    background-size: cover;
}
.title{
    display: inline-block;
    font-family: 'Permanent Marker', cursive;
    font-size: 25pt;
    color: black;
    padding-top: 2ch;
    padding-left: 3rem;
}

  

/* Dropdown Button */
.dropbtn {
  background-color: #000000;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  float: right;
  display: flex;
  align-items: flex-end;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  float: right;
  padding-right: 2rem;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: relative;
  background-color: #70868a;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-family: 'Roboto Condensed', sans-serif;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: black;}

.name{
  display: flex;
  justify-content: left;
  font-family: 'Roboto Condensed', sans-serif;
  padding-left: 3rem;
}

.moving-words{
  display: flex;
  align-self: center;
  justify-content: center;
  padding-top: 10rem;
  font-size: 35pt;
  font-family: 'Alfa Slab One', cursive;
  text-shadow: 5px 5px rgb(99, 151, 185);


}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <div class="title">TOWN CO.</div>
    
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Permanent+Marker&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital@1&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">


     <div class="name">Temuulen Batbayar</div>

    <div class="moving-words">FRONTEND DELEVOPMENT UI</div>

    <div class="home"><a href="homepage.html">Home</a></div>


    <div class="dropdown">
        <button class="dropbtn">...</button>
        <div class="dropdown-content" id="navbarToggleExternalContent">
          <a href="about.html">About</a>
          <a href="portfolio.html">Portfolio</a>
          <a href="services.html">Services</a>
          <a href="contact.html">Contact</a>

     
</body>
<footer>
  <ul class="footer-links">
  <li><a href="">Lorem ipsum dolor sit amet.</a></li>
  <li><a href="">Lorem ipsum dolor sit amet.</a></li>
  <li><a href="">Lorem ipsum dolor sit amet.</a></li>
</footer>
</html>

Answer 1

您忘记关闭 divs 只需添加 </div></div>

检查代码段

而且页脚应该在 body 标签内而不是在外面。

html{
    background: url(background.jpg) no-repeat center fixed;
    background-size: cover;
}
.title{
    display: inline-block;
    font-family: 'Permanent Marker', cursive;
    font-size: 25pt;
    color: black;
    padding-top: 2ch;
    padding-left: 3rem;
}

  

/* Dropdown Button */
.dropbtn {
  background-color: #000000;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  float: right;
  display: flex;
  align-items: flex-end;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  float: right;
  padding-right: 2rem;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: relative;
  background-color: #70868a;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-family: 'Roboto Condensed', sans-serif;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: black;}

.name{
  display: flex;
  justify-content: left;
  font-family: 'Roboto Condensed', sans-serif;
  padding-left: 3rem;
}

.moving-words{
  display: flex;
  align-self: center;
  justify-content: center;
  padding-top: 10rem;
  font-size: 35pt;
  font-family: 'Alfa Slab One', cursive;
  text-shadow: 5px 5px rgb(99, 151, 185);


}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <div class="title">TOWN CO.</div>
    
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Permanent+Marker&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital@1&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">


     <div class="name">Temuulen Batbayar</div>

    <div class="moving-words">FRONTEND DELEVOPMENT UI</div>

    <div class="home"><a href="homepage.html">Home</a></div>


    <div class="dropdown">
        <button class="dropbtn">...</button>
        <div class="dropdown-content" id="navbarToggleExternalContent">
          <a href="about.html">About</a>
          <a href="portfolio.html">Portfolio</a>
          <a href="services.html">Services</a>
          <a href="contact.html">Contact</a>
  </div>
  </div>
  <footer>
  <ul class="footer-links">
  <li><a href="">Lorem ipsum dolor sit amet.</a></li>
  <li><a href="">Lorem ipsum dolor sit amet.</a></li>
  <li><a href="">Lorem ipsum dolor sit amet.</a></li>
</footer>
</body>
</html>

我添加了一个下拉导航，现在其他内容一直在下拉菜单中

I added a dropdown nav and now other content keeps going inside the dropdown menu

html

css

drop-down-menu

nav

cascadingdropdown