我正在尝试在CSS中创建一个水平子导航栏(没有无序列表(，但是无法显示下拉菜单。 这是我在HTML中的代码：
<div class="navbar sticky">
<a href="#e">Home</a>
<div class="subnav">
<button class="subnavbtn">Learn <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#">Print</a>
<a href="#">Review</a>
<a href="#">Examples</a>
<a href="#">More Info</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Game <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#">Play Now!</a>
<a href="#">How to Play</a>
<a href="#">Cards</a>
</div>
</div>
<a href="#">Minigames</a>
</div>
这是我在 CSS 中的代码：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.navbar {
overflow: hidden;
background-color: green;
position: sticky;
top: 0;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: chartreuse;
color: black;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
visibility: hidden;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
display: inline;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
visibility: visible;
display: block;
}
我尝试过更改不透明度甚至使用可见性，但它对我不起作用。有时会出现下拉列表，但顶部导航栏会发生变化("游戏"链接将向右移动，从"更多信息"结束的位置开始，即使它们位于不同的栏上(。 我在搜索此问题时看到的大多数解决方案是它们没有使用(显示：块;(，但是我一直在，但我不知道此时该怎么办。
这是小提琴
从.navbar声明中删除overflow:hidden;并将其替换为float:left;和width:100%;
浮点元素将从父元素的计算高度中删除。但是，overflow:hidden;调用要通过块格式上下文计算的高度，但是，隐藏了您的下拉列表，导致溢出被隐藏。
此外，浮动父元素意味着子元素决定父元素的高度，使其更具动态性。
修改后的小提琴在这里
只需从类名为navbar的div中删除position属性。
.navbar {
overflow: hidden;
background-color: green;
top: 0;
}
下拉菜单显示在导航栏中。 因此，您应该在.navbar中将overflow: hidden替换为height: 50px：
.navbar {
height: 50px;
background-color: green;
position: sticky;
top: 0;
}