【发布时间】：2021-09-07 03:38:19
【问题描述】：
目前正在创建一个下拉菜单，在进行样式设置时，我似乎已经破坏了菜单的实际下拉功能，其中其余按钮不下拉，或者只有少数按钮不下拉，我正在绞尽脑汁尝试修复它并且没有任何进展。
如果可能的话，我希望按钮垂直下降，例如，如果您突出显示请求，您会得到：
- 提交新请求
- 打开请求
- 已关闭的请求
任何有助于纠正的帮助将不胜感激。
抱歉，如果代码有点混乱，这是一项早期工作，还有一些整理工作要做！
<html><head><style>body {
font: normal normal bold 16px trebuchet ms;
border: 0;
text-align: center;
}
.nv {
background: #4d9fb1;
background: -webkit-gradient(linear, left top, left bottom, from(#4d9fb1), to(#2f626d));
background: -moz-linear-gradient(top, #4d9fb1, #2f626d);
background: linear-gradient(to bottom, #4d9fb1, #2f626d);
padding: 0;
width: 100%;
display: flex;
justify-content: center;
text-decoration: none;
margin: 0px;
}
.nv a {
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: flex;
}
.snv {
text-align: center;
float: left;
}
.snv .snvbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background: inherit;
font: inherit;
margin: 0;
}
.nv a:hover,
.snv:hover .snvbtn {
background: white;
color: #3B7A8B;
margin-left: auto;
padding-left: auto;
padding-right: auto;
}
.snv-content {
display: none;
position: absolute;
background: #4d9fb1;
background: -webkit-gradient(linear, left top, left bottom, from(#4d9fb1), to(#2f626d));
background: -moz-linear-gradient(top, #4d9fb1, #2f626d);
background: linear-gradient(to bottom, #4d9fb1, #2f626d);
width: inherit;
z-index: 1;
color: white;
}
.snv-content a {
display: inline-block;
color: white;
text-decoration: none;
}
.snv-content a:hover {
background: white;
color: #3B7A8B;
}
.snv:hover .snv-content {
display: block;
}
.nv li {
border-right: 3px solid #ffffff;
display: inline-block;
float: left;
padding: 0px;
overflow: hidden;
}
.nv li:last-child {
border-right: 0;
}
.nv li>a {
color: white;
font-family: Trebuchet MS;
font-size: 16px;
font-weight: bold;
line-height: 19px;
}
</style></head><body>
<div class="nv">
<li><a href="#home">Home</a></li>
<div class="snv">
<li><button class="snvbtn">Requests
</button></li>
<div class="snv-content">
<li><a href="#company">Submit New Request</a></li>
<li><a href="#team">Open Requests</a></li>
<li><a href="#careers">Closed Requests</a></li>
</div>
</div>
<div class="snv">
<li><button class="snvbtn">Proactive Maintenance</button></li>
<div class="snv-content">
<li><a href="#bring">Outstanding Requests</a></li>
<li><a href="#deliver">Completed Requests</a></li>
<li><a href="#package">Your Calendar</a></li>
<li><a href="#express">Export Report</a></li>
</div>
</div>
<div class="snv">
<li><button class="snvbtn">Admin Tools</button></li>
<div class="snv-content">
<li><a href="#link1">VPN Activity</a></li>
<li><a href="#link2">Backup Reporting</a></li>
<li><a href="#link3">Asset List</a></li>
<li><a href="#link4">Licence Management</a></li>
</div>
</div>
<li><a href="#contact">Your Profile</a></li>
</div>
</body>
</html>
</div>
<div class="push"></div>
</div>
</body>【问题讨论】：
-
li标签周围的 HTML 标记无效。li标记必须包含在ul、ol或menu的父元素中（参见 developer.mozilla.org/en-US/docs/Web/HTML/Element/li），修复此结构可能是好的第一步。然后，请参阅这篇 CSS 技巧文章，该文章解释了悬停下拉菜单的 HTML/CSS 结构。
标签： html css drop-down-menu navigationbar