如何用CSS定位下拉菜单：解决导航下拉项错位重叠问题

你的下拉菜单出现位置偏移、内容重叠的问题，核心原因是HTML结构错误和CSS定位逻辑缺失，以下是修正后的完整代码及关键修改说明：

修正后的HTML代码 #

<header>
  <h1>Micah Moore</h1>
  <nav>
    <ul>
      <li>
        <a>Nav Item</a>
      </li>
      <li class="dropdown">
        <button class="dropbtn">My Projects</button>
        <!-- 将dropdown-content类移到ul上，作为下拉容器 -->
        <ul class="dropdown-content">
          <li>
            <a>Work in Progress</a>
          </li>
          <li>
            <a>My Works</a>
          </li>
        </ul>
      </li>
      <li>
        <a>Nav Item 2</a>
      </li>
    </ul>
  </nav>
</header>

修正后的CSS代码 #

header {
  padding: 10px 35px;
  background-color: rgba(5, 69, 129, 0.7);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  top: 0;
}

header h1 {
  font-weight: bold;
  font-size: 36px;
  color: rgba(240, 238, 238, 1.0);
}

header a {
  text-decoration: none;
  color: rgba(240, 238, 238, 1.0);
}

header nav {
  margin: 7px 0;
}

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

header nav ul li {
  /* 移除冲突的float和flex属性，改用inline-block实现横向排列 */
  display: inline-block;
  position: relative; /* 为下拉菜单提供定位基准 */
}

header nav ul li a,
.dropdown .dropbtn {
  /* 统一导航项和下拉按钮的样式 */
  display: block;
  margin: 0 30px;
  font-weight: lighter;
  font-size: 1.55vw;
  padding: 8px 0;
}

.dropdown .dropbtn {
  border: none;
  outline: none;
  color: rgba(240, 238, 238, 1.0);
  background-color: inherit;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%; /* 让下拉菜单紧贴按钮下方 */
  left: 0; /* 对齐按钮左侧 */
  background-color: rgba(5, 69, 129, 0.7);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.dropdown-content li {
  display: block; /* 下拉项纵向排列 */
}

.dropdown-content a {
  color: rgba(240, 238, 238, 1.0);
  padding: 12px 16px;
  margin: 0; /* 移除继承的margin，避免错位 */
  text-align: left;
}

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

关键修改点说明 #

1. HTML结构修正：把dropdown-content类从单个<a>标签移到下拉菜单的<ul>上，让它成为完整的下拉容器，而非单个链接的样式类。
2. 定位基准设置：给下拉按钮所在的<li>（即.dropdown）添加position: relative，确保绝对定位的下拉菜单以按钮为基准定位，而非整个页面。
3. 位置精准控制：给.dropdown-content设置top: 100%和left: 0，让下拉菜单紧贴按钮下方并对齐左侧。
4. 样式冲突解决：
   • 移除导航项li上冲突的float: left和inline-flex，改用inline-block实现横向排列。
   • 统一导航链接和下拉按钮的内边距、外边距，避免错位。
   • 重置下拉项的margin，移除继承的导航项外边距，保证下拉内容排版整齐。

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