来自 WS3 网站的 CSS 下拉菜单

Question

我刚刚从ws3网站复制了css下拉菜单示例

aaand 它不适用于我的代码。我检查了一下我是否打错了字，我没有。

我也试图复制代码，看看它是否有效，它确实有效，但是当我为我的页面添加其他内容时(例如将 ws3 的内容与我的内容一起替换(，它没有。

你们能指导我完成这个吗？ 谢谢:)

我的代码( html(：

<nav>
<ul>
<li><a href="#">front page</a></li>
<li><a class ="active" href="#">paintings</a></li>
<li class="dropdown"><a href="javascript:void(0)" class="dropbtn">Series</a>
<div class="dropdown-content">
<a href="#">City</a>
<a href="#">80's windbreaker</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</nav>

只是导航栏部分

.css：

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
font-size:3em;
position:sticky;
top:0;
color:blue;
}

li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: gray;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: red;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active{
background-color: blue;
}

Answer 1

看起来问题出在<ul>元素上的position: sticky。删除它允许下拉列表工作。