Question

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

我猜想我玩这个游戏太久了，这是最大的问题：在jsfiddle中，下拉菜单现在完全显示。但是，在我的电脑上，只要不添加'sticky'类，下拉菜单就会显示出来，然后也变得不可见。

在stackoverflow中，我读到有关overflow：隐藏在导航栏中的问题。删除后，下拉菜单将起作用，但导航栏将消失。

我认为这里的错误，但是无法解决。.

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

出现此问题是因为在导航项中使用了浮点数。

因此，无需在#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;
}

希望这会有所帮助。干杯，耶隆。

Answer 2

如果将li元素设置为overflow: hidden;或float: left;，则删除float: right;会使主导航栏的背景颜色消失。

我通过使用.dropdown-content div元素使position: sticky;类ul.topnav来解决了内容不出现的问题。问题是，出现下拉菜单时会出现新的故障，并为其分配了背景色，除了一件事情外，它应有的作用。 topnav列表的背景颜色在下拉列表的周围下降，使整个列表更胖，而不是显示简单的单独的下拉菜单。

Answer 3

我遇到了同样的问题，并通过将导航栏放置在带有“位置：粘性”的“div”元素内来解决它。
例如：

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

CSS：带有下拉菜单的粘性导航栏未显示（-溢出）？

3 个答案: