javascript - CSS:带有下拉菜单的粘性导航栏未显示(-溢出)？

Question

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

我想我现在玩这个太久了.. 最大的问题是:在 jsfiddle 中，下拉菜单现在完全显示了。然而，在我的电脑上，只要不添加“粘性”类，下拉菜单就会显示，然后也会变得不可见。

在 stackoverflow 中，我读到关于溢出:隐藏在导致问题的导航栏中。删除它会使下拉菜单起作用，但导航栏会消失。

-> 下拉菜单不可见 https://imgur.com/JYcswYq

-> 未显示导航栏 https://imgur.com/Gk5P6gN

我假设这里某处有错误，但无法弄清楚..

#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;
}

在那里你可以找到我的代码的简化部分。这里的下拉列表根本不显示。 (在我的电脑上，只要不添加粘性类，它至少会显示) https://jsfiddle.net/xncjazky/3/

希望我能得到任何关于如何使用粘性导航栏弹出下拉菜单的建议。 谢谢。

Answer 1

删除你自己发现的 overflow:hidden，并向 #navbar 选择器添加一个 height 或 min-height 属性，如下所示:

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

出现此问题是因为在您的导航项中使用了 float 。

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

像这样:

#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;
}

希望这对您有所帮助。 干杯，杰伦。