导航栏整合下拉菜单后文本偏移、菜单错位问题求助

问题情况 #

单独编写的下拉菜单功能正常，但整合到导航栏后，下拉菜单文本被向右挤压，左侧出现异常小框，完全无法与触发按钮精准对齐。

问题根源 #

1. HTML结构不规范：<submenu-content>是<ul>标签，直接嵌套<a>标签违反HTML规则（<ul>的直接子元素必须是<li>），浏览器会自动补全错误结构，导致左侧出现异常小框。
2. 导航布局混乱：所有导航项挤在同一个<li>内，.navbar_item设置为block，内部元素互相挤压导致布局错位。
3. 下拉定位缺失：.submenu-content使用absolute定位但未设置left: 0，默认位置偏移，无法与触发按钮对齐。

修复后的完整代码 #

CSS #

.subbtn {
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  padding: 14px;
  /* 和导航链接样式统一 */
  display: inline-block;
  text-align: center;
}

.submenu {
  position: relative;
  display: inline-block;
}

.submenu-content {
  display: none;
  position: absolute;
  left: 0; /* 强制下拉菜单与按钮左对齐 */
  min-width: 120px; /* 调整宽度适配内容 */
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
  z-index: 1;
  background-color: white; /* 避免透明背景导致内容重叠 */
  padding: 0;
  margin: 0;
  list-style: none; /* 去掉默认列表标记 */
}

.submenu-content li {
  padding: 0;
  margin: 0;
}

.submenu-content a {
  color: #0d0d0d;
  padding: 14px;
  text-decoration: none;
  display: block;
}

.submenu:hover .submenu-content {
  display: block;
}

.submenu:hover .subbtn {
  color: white;
  background: #403c36;
  opacity: 0.8;
}

.navbar_1 {
  font-family: Arial;
  font-size: 14px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex; /* 让导航项横向排列，避免互相挤压 */
}

.navbar_item {
  text-transform: uppercase;
  font-weight: bold;
}

.navbar_1 a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: 14px;
  color: #0d0d0d;
}

.navbar_1 a:hover {
  color: white;
  background: #403c36;
  opacity: 0.8;
}

HTML #

<ul class="navbar_1">
  <li class="navbar_item">
    <a href="#">nyheder</a>
  </li>
  <li class="navbar_item">
    <div class="submenu">
      <div class="subbtn">information</div>
      <ul class="submenu-content">
        <li><a href="#">regler</a></li>
        <li><a href="#">vedtægter</a></li>
        <li><a href="#">Hvem er vi</a></li>
        <li><a href="#">bestyrelsen</a></li>
      </ul>
    </div>
  </li>
  <li class="navbar_item">
    <a href="#">bliv medlem</a>
  </li>
  <li class="navbar_item">
    <a href="#">medlemsfordele</a>
  </li>
  <li class="navbar_item">
    <a href="#">kontakt</a>
  </li>
</ul>

修复说明 #

• 将所有导航项拆分到独立的<li>中，用flex布局实现横向排列，彻底解决内容挤压问题。
• 修正<submenu-content>的结构，给每个<a>标签包裹<li>，符合HTML规范，消除左侧异常小框。
• 给.submenu-content添加left: 0，确保下拉菜单与触发按钮精准左对齐；添加上背景色、清除默认列表样式，让下拉菜单显示更正常。
• 统一.subbtn与导航链接的样式，保证视觉一致性。

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