我的导航栏在移动模式下样式完全更改

由于某些原因,我的导航栏在移动模式下会完全更改,这不是我想要的。在移动模式下按三行时,样式完全不同。谢谢。

我从w3schools获得了这个主意,并尝试使用diffchecker,但问题仍然存在。

Here is w3schools link: https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp

这是我的HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="app.css">
   <script src="https://code.jquery.com/jquery-3.3.0.js"></script>
   <script src="script.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"/>
</head>
<body>
   <section>
         <!-- <a href="" class="logo"><img src="../version-two/timely/logo.png" height="80px"></a>
         <a href="" class="toggle">Menu</a> -->
         <div class="topnav" id="myTopnav">
            <a href="index.html"><i class="fas fa-home"></i> Home</a></li>
               <!-- <li><a href=""><i class="fas fa-tools"></i> Tools</a></li> -->
            <a href=""><i class="fas fa-tools"></i> Tools</a></li>


               <div class="dropdown">
                  <button class="dropbtn">Dropdown<i class="fas fa-caret-down"></i></button>
                  <div class="dropdown-content">
                     <a href="">Link 1</a>
                     <a href="">Link 2</a>
                     <a href="">Link 3</a>
                  </div>
               </div>


            <a href=""><i class="fas fa-question-circle"></i> Services</a></li>
            <a href=""><i class="fas fa-graduation-cap"></i> Educ</a></li>
            <a href=""><i class="fas fa-chalkboard-teacher"></i> Projects</a></li>
            <a href=""><i class="fas fa-random"></i> Generators</a></li>
            <a href=""><i class="fas fa-folder-open"></i> Minis</a></li>
            <a href="games.html"><i class="fas fa-gamepad"></i> Games</a></li>
            <a href="blog.html"><i class="fas fa-bullhorn"></i> Blog</a></li>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776</a>
         </div>
   </section>
</body>
</html>

CSS:

body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
}

section {
   position: relative;
   width: 100%;
   height: 100vh;
   /* background: linear-gradient(45deg, red, orange, yellow, green, blue); */
   background: #3494E6;
   background: -webkit-linear-gradient(to right, #EC6EAD, #3494E6);
   background: linear-gradient(to right, #EC6EAD, #3494E6);
   background-position: center center;
}

.topnav {
   /* padding: 0 100px;
   width: 100%;
   height: 80px;
   box-sizing: border-box; */
   background: rgba(255,255,255,.2);
   /* box-shadow: 0 5px 15px rgba(0,0,0,.2);
   transition: .5s; */
   overflow: hidden;
}

.topnav a {
   float: left;
   display: block;
   color: #f2f2f2;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
}

.topnav .icon {
   display: none;
}

.dropdown {
   float: left;
   overflow: hidden;
}

.dropbtn {
   font-size: 17px;
   border: none;
   outline: none;
   color: white;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit;
   margin: 0;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
   z-index: 1;
}

.dropdown-content a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
   background-color: #555;
   color: white;
}


.dropdown-content a:hover {
   background-color: #ddd;
   color: black;
}

.dropdown:hover .dropdown-content {
   display: block;
}


@media screen and (max-width: 992px) {

   .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
   }

   .topnav a.icon {
      float: right;
      display: block;
   }

}

@media screen and (max-width: 992px) {

   .topnav .responsive, .topnav.responsive .dropdown-content {
      position: relative;
   }

   .topnav .responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
   }

   .topnav .responsive a {
      float: none;
      display: block;
      text-align: left;
   }

   .topnav.responsive .dropdown {
      float: none;
   }

   .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
   }

}

JS:

function myFunction() {
   var x = document.getElementById("myTopnav");
   if (x.className === "topnav") {
      x.className += "responsive";
   } else {
      x.className = "topnav";
   }
}
body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
}

section {
   position: relative;
   width: 100%;
   height: 100vh;
   /* background: linear-gradient(45deg, red, orange, yellow, green, blue); */
   background: #3494E6;
   background: -webkit-linear-gradient(to right, #EC6EAD, #3494E6);
   background: linear-gradient(to right, #EC6EAD, #3494E6);
   background-position: center center;
}

.topnav {
   /* padding: 0 100px;
   width: 100%;
   height: 80px;
   box-sizing: border-box; */
   background: rgba(255,255,255,.2);
   /* box-shadow: 0 5px 15px rgba(0,0,0,.2);
   transition: .5s; */
   overflow: hidden;
}

.topnav a {
   float: left;
   display: block;
   color: #f2f2f2;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
}

.topnav .icon {
   display: none;
}

.dropdown {
   float: left;
   overflow: hidden;
}

.dropbtn {
   font-size: 17px;
   border: none;
   outline: none;
   color: white;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit;
   margin: 0;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
   z-index: 1;
}

.dropdown-content a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
   background-color: #555;
   color: white;
}


.dropdown-content a:hover {
   background-color: #ddd;
   color: black;
}

.dropdown:hover .dropdown-content {
   display: block;
}


@media screen and (max-width: 992px) {

   .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
   }

   .topnav a.icon {
      float: right;
      display: block;
   }

}

@media screen and (max-width: 992px) {

   .topnav .responsive, .topnav.responsive .dropdown-content {
      position: relative;
   }

   .topnav .responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
   }

   .topnav .responsive a {
      float: none;
      display: block;
      text-align: left;
   }

   .topnav.responsive .dropdown {
      float: none;
   }

   .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
   }

}
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="app.css">
   <script src="https://code.jquery.com/jquery-3.3.0.js"></script>
   <script src="script.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"/>
</head>
<body>
   <section>
         <!-- <a href="" class="logo"><img src="../version-two/timely/logo.png" height="80px"></a>
         <a href="" class="toggle">Menu</a> -->
         <div class="topnav" id="myTopnav">
            <a href="index.html"><i class="fas fa-home"></i> Home</a></li>
               <!-- <li><a href=""><i class="fas fa-tools"></i> Tools</a></li> -->
            <a href=""><i class="fas fa-tools"></i> Tools</a></li>
            
            
               <div class="dropdown">
                  <button class="dropbtn">Dropdown<i class="fas fa-caret-down"></i></button>
                  <div class="dropdown-content">
                     <a href="">Link 1</a>
                     <a href="">Link 2</a>
                     <a href="">Link 3</a>
                  </div>
               </div>


            <a href=""><i class="fas fa-question-circle"></i> Services</a></li>
            <a href=""><i class="fas fa-graduation-cap"></i> Educ</a></li>
            <a href=""><i class="fas fa-chalkboard-teacher"></i> Projects</a></li>
            <a href=""><i class="fas fa-random"></i> Generators</a></li>
            <a href=""><i class="fas fa-folder-open"></i> Minis</a></li>
            <a href="games.html"><i class="fas fa-gamepad"></i> Games</a></li>
            <a href="blog.html"><i class="fas fa-bullhorn"></i> Blog</a></li>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776</a>
         </div>
   </section>
</body>
</html>