HTML/CSS下拉菜单无法级联展开问题，需实现垂直下拉效果

核心问题及修复点 #

• 移除.nv li样式中的overflow: hidden属性，避免下拉内容被裁剪
• 为.snv添加position: relative，让子菜单基于父按钮定位
• 将.snv-content a的display属性改为block，实现垂直排列
• 删除hover样式中多余的margin-left: auto、padding-left: auto、padding-right: auto，避免元素偏移
• 调整.snv-content的宽度为100%，适配父按钮宽度
• 为li添加list-style: none清除默认列表圆点

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font: normal normal bold 16px trebuchet ms;
  border: 0;
  text-align: center;
  margin: 0;
}

.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;
  position: relative;
}

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

.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: 100%;
  z-index: 1;
  color: white;
}

.snv-content a {
  display: 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;
  list-style: none;
}

.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>

内容的提问来源于stack exchange，提问作者Adam McCormick