Javascript CSS：不显示下拉菜单的粘性导航栏（-overflow）？

我尝试使用带有下拉菜单的粘性导航栏。 但下拉菜单不显示

我想我玩这个已经太久了。。最大的问题是：在JSFIDLE中，下拉菜单现在根本不显示。但是，在我的电脑上，只要不添加“sticky”类，下拉菜单就会显示，然后也会变为不可见

在stackoverflow中，我了解到溢出：隐藏在导致问题的导航栏中。删除使下拉菜单工作但导航栏消失的内容

->下拉菜单不可见

->导航栏未显示

我猜想这里有什么地方出了错，但我想不出来

#navbar{
  overflow: hidden;
  font-size: 25px;
  background-color: #333333;
}
main{
  padding-top: 30px;
  padding-bottom: 30px;
}
.dropdown-content {
  right:0;
  display: none;
  position: absolute;
  background-color: #333333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-top: 48px;
}

在那里你可以找到我的代码的缩减部分。这里根本没有显示下拉列表。（在我的电脑上，只要没有添加粘性类，它至少会显示出来）

希望我能得到任何建议，如何使下拉菜单弹出，即使与粘性导航栏。

---

谢谢。

根据您自己的发现，删除

溢出：隐藏的
，并向
#navbar
选择器添加高度或最小高度属性，如下所示：

#navbar {
  //overflow: hidden;
  font-size: 25px;
  background-color: #333333;
  min-height: 48px;
}

出现此问题的原因是导航项中使用了浮动

因此，解决此问题的另一种方法是将导航项从
float:left
更改为
display:inline block
，而无需为
#navbar
设置固定高度

像这样：

#navbar {
  //overflow: hidden;
  font-size: 25px;
  background-color: #333333;
}
.lnav{
  //float: left;
  //display: block;
  display: inline-block;
  padding: 10px;
  text-align: center;
  color: #d9d9d9;
  text-decoration: none;
  cursor: pointer;
}

希望这有帮助。
干杯，杰伦
 删除
溢出：隐藏float:left，则code>将导致主导航栏的背景色消失或<代码>浮动：右侧

我通过设置
下拉内容div
类
位置：sticky，解决了内容不出现的问题带有
ul.topnav
元素。问题是，当下拉列表出现时，会出现一个新的小故障，背景色被指定给它，它应该这样做，除了一件事。topnav列表的背景色在下拉列表周围向下移动，使整个列表更胖，而不是显示一个简单的单独下拉菜单。
我也遇到了同样的问题，通过将导航栏放在“div”元素中并带有“position:sticky”来解决它。

例如：

<div style="top: 0; position: -webkit-sticky; position: sticky">
<nav>
<!-- here goes the code of navbar -->
</nav>
</div>

谢谢！！这就解开了谜团：）由于某种原因，在JSFIDLE中它仍然不工作，但在我的项目中，它现在工作得很好！