Javascript 尝试使用菜单下拉菜单创建导航栏，但我的菜单项似乎不想显示，或者它们隐藏在父容器中

我正在创建一个简单的导航栏，我希望它能够响应。我目前的问题是，我试图让一个下拉菜单从其中一个菜单项上拉出来，当我悬停时，没有一个项目出现，但当我检查它们时，它们会显示出来

我尝试过应用z-index并将位置更改为relative，但没有任何效果

   <div class="navwrap">
      <div class="topnav" id="myTopnav">
         <a href="#home" class="active">Home</a>
         <a href="#news">News</a>
         <a href="#contact">Contact</a>
         <a href="#about">About</a>
         <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i>
         </a>
         <div class="dropdown">
            <button class="dropbtn">Dropdown</button>
            <div class="dropdown-content">
               <a href="#">Link 1</a>
               <a href="#">Link 2</a>
               <a href="#">Link 3</a>
            </div>
         </div>
      </div>
   </div>

JAVASCRIPT

应该有导航栏和我的下拉菜单项

函数myFunction{ var x=document.getElementByIdmyTopnav； 如果x.className==topnav{ x、 className+=响应性； }否则{ x、 className=topnav； } } .navwrap{} 托普纳夫先生{ 溢出：隐藏； 背景色：333； .下拉列表{ button.dropbtn{} .dropdown内容{} } .下拉：悬停.下拉内容{ 显示：块； } } .topnav a{ 浮动：左； 显示：块； 颜色：F2F2； 文本对齐：居中； 填充：14px 16px； 文字装饰：无； 字号：17px； } .topnav a:悬停{ 背景色：ddd； 颜色：黑色； } .主动{ 背景色：4CAF50； 颜色：白色； } .topnav.icon{ 显示：无； } @媒体屏幕和最大宽度：600px{ 托普纳夫：不是第一个孩子{ 显示：无； } .topnav a.icon{ 浮动：对； 显示：块； } } @媒体屏幕和最大宽度：600px{ .topnav{ 位置：相对位置； } .topnav.responsive.icon{ 位置：绝对位置； 右：0； 排名：0； } .topnav.a{ 浮动：无； 显示：块； 文本对齐：左对齐； } } //导航下拉列表 .dropbtn{ 背景色：4CAF50； 颜色：白色； 填充：16px； 字体大小：16px； 边界：无； } .下拉列表{ 位置：相对位置； 显示：内联块； } .下拉内容{ 显示：无； 位置：绝对位置； 背景色：F1F1； 最小宽度：160px； 盒影：0px 8px 16px 0px rgba0,0,0,0.2； z指数：1； } .下拉内容a{ 颜色：黑色； 填充：12px 16px； 文字装饰：无； 显示：块； } .下拉列表内容a：悬停{ 背景色：ddd； } .下拉：悬停.下拉内容{ 显示：块； } .dropdown:悬停.dropbtn{ 背景色：3e8e41； } 下拉列表

---

溢出：隐藏需要可见

看起来像溢出：隐藏；这里的问题是隐藏超出容器边界的内容。即时修复。这让我觉得自己像个白痴哈哈。谢谢@sn3p！不客气：visible是默认值，因此也可以删除它

.navwrap{}
.topnav {
   overflow: hidden;
   background-color: #333;

   .dropdown {
      button.dropbtn {

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

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

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

 .active {
   background-color: #4CAF50;
   color: white;
 }

 .topnav .icon {
   display: none;
 }

 @media screen and (max-width: 600px) {
   .topnav a:not(:first-child) {display: none;}
   .topnav a.icon {
     float: right;
     display: block;
   }
 }

 @media screen and (max-width: 600px) {
   .topnav.responsive {position: relative;}
   .topnav.responsive .icon {
     position: absolute;
     right: 0;
     top: 0;
   }
   .topnav.responsive a {
     float: none;
     display: block;
     text-align: left;
   }
 }
//Navigation Dropdown
.dropbtn {
   background-color: #4CAF50;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
}

.dropdown {
   position: relative;
   display: inline-block;
}

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

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

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

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

.dropdown:hover .dropbtn {
   background-color: #3e8e41;
}

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }