我正在编写代码以通过 css-Dropdown 创建导航栏菜单，但此时我被困在这里。每当我点击“下拉菜单”时，我都无法获得所需的菜单栏，但是在指定位置删除“position:relative”会给出正确的结果。我的原始代码有什么问题？
<!DOCTYPE html>
<html>
<head>
<style>
ul{
list-style-type: none;
margin:0;
padding:0;
overflow: hidden;
width: 100%;
background-color: #333;
}
li{
float: left;
}
li a, .dropbutton{
text-decoration: none;
color: white;
padding: 12px 16px;
display: inline-block;
border: none; /* x */
text-align: center;
}
li a:hover , .dropdown:hover .dropbutton
{
background-color:black;
}
如果我从下面删除“position: relative”，那么我就能获得导航栏菜单
.dropdown{
position: relative; /* remove */
display: inline-block;
}
.dropdown_content {
display: none;
background-color: #444;
position: absolute;
color: white;
box-shadow: 0 12px 16px 0px rgba(0,0,0,0.7);
text-align: center;
z-index: 1;
}
.dropdown_content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown_content{
display: block;
}
.dropdown_content a:hover{
background-color: silver;
}
</style>
</head>
<body>
<ul>
<li><a href="#jfjkwj">Home</a></li>
<li><a href="#jfjkwj">Home</a></li>
<li><a href="#jfjkwj">Home</a></li>
<li><a href="#jfjkwj">Home</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbutton">Dropdown</a>
<div class="dropdown_content">
<a href="#nkkje">okay</a>
<a href="#nkkje">okay</a>
<a href="#nkkje">okay</a>
</div>
</li>
</li>
</ul>
</body>
</html>
最佳答案
您需要删除 overflow:hidden来自 <ul> ，这就是隐藏下拉内容的原因，并使用 display:inline-block在 <li>而不是 float
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #333;
}
li {
display:inline-block;
}
li a,
.dropbutton {
text-decoration: none;
color: white;
padding: 12px 16px;
display: inline-block;
border: none;
/* x */
text-align: center;
}
li a:hover,
.dropdown:hover .dropbutton {
background-color: black;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown_content {
display: none;
background-color: #444;
position: absolute;
color: white;
box-shadow: 0 12px 16px 0px rgba(0, 0, 0, 0.7);
text-align: center;
z-index: 1;
}
.dropdown_content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown_content {
display: block;
}
.dropdown_content a:hover {
background-color: silver;
}<ul>
<li><a href="#jfjkwj">Home</a></li>
<li><a href="#jfjkwj">Home</a></li>
<li><a href="#jfjkwj">Home</a></li>
<li><a href="#jfjkwj">Home</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbutton">Dropdown</a>
<div class="dropdown_content">
<a href="#nkkje">okay</a>
<a href="#nkkje">okay</a>
<a href="#nkkje">okay</a>
</div>
</li>
</li>
</ul>关于html - 由于 css 位置错误，无法显示下拉菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44463936/