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

Posted 2023-04-13

【中文标题】尝试使用菜单下拉菜单创建导航栏，但我的菜单项似乎不想出现，或者它们隐藏在我的父容器中

【英文标题】：Trying to create a navbar with a menu dropdown, but my menu items seem to not want to appear or they are hidden inside my parent container

【发布时间】：2019-07-05 10:26:25

【问题描述】：

我正在创建一个我想要响应的简单导航栏。我目前的问题是我试图在其中一个菜单项上设置一个下拉菜单（从 W3Schools 中提取），当我将鼠标悬停时，没有任何项目出现，但当我检查它们时它们会显示。

我尝试应用 z-index 并将位置更改为相对位置，但没有任何工作正常。

   <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>

CSS

.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;

JAVASCRIPT

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

应该有带有下拉菜单项的导航栏。

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

.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;

<!-- NAVIGATION -->
<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>

【问题讨论】：

看起来overflow: hidden; 是这里的问题，它隐藏了超出容器边界的内容。

即时修复。现在这让我觉得自己像个白痴哈哈。谢谢@sn3p！

不客气 :)

【参考方案1】：

overflow: hidden 必须是visible

【讨论】：

visible 是默认值，也可以去掉