如何让导航栏中播客下拉菜单与上方Projects标签对齐？

一、修复下拉菜单错位问题 #

下拉菜单错位的核心原因是dropdown-content使用position: relative，会跟随父元素文档流排列，无法实现悬浮对齐；同时原JS函数中的ID与HTML元素不匹配，导致交互逻辑失效。修改步骤：

• 调整dropdown-content定位：改为position: absolute脱离文档流，设置top: 100%、left: 0对齐父元素底部左侧，默认display: none隐藏
• 修正下拉链接样式：去掉margin: auto，设置width: 100%确保与父按钮宽度一致
• 匹配JS与HTML的ID：给dropdown-content添加对应ID，或直接用类选择器控制显示

二、解决Flexbox设置后元素消失问题 #

原导航栏用float: left布局，切换为display: flex后需移除子元素的float属性（flex布局下float无效），同时调整父容器对齐方式：

• 给.topnav添加display: flex和align-items: center，让导航项垂直居中
• 移除.topnav a中的float: left
• 保持.dropdown的position: relative，作为下拉菜单的定位参照

修改后的完整代码 #

HTML

<div class="topnav" id="topnavi">
  <a href="index.html" class="active">Home</a>
  <a href="art.html">Art</a>
  <a href="resources.html">Resources</a>
  <div class="dropdown">
    <a href="proj.html" class="dropbtn" onclick="toggleDropdown()">Projects &nbsp;&#8964;</a>
    <div class="dropdown-content" id="dropdownContent">
      <a href="podcast.html">Podcast</a>
    </div>
  </div>
  <a href="about.html">About</a>
</div>

CSS

.topnav {
  background-color: #9e2118;
  position: fixed;
  width: 100%;
  top: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.topnav a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background-color: #9e2118;
  min-width: 148px;
}

.dropdown-content a {
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

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

JavaScript

function toggleDropdown() {
  document.getElementById("dropdownContent").classList.toggle("show");
}

// 点击页面其他区域关闭下拉菜单
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    const dropdowns = document.getElementsByClassName("dropdown-content");
    for (let i = 0; i < dropdowns.length; i++) {
      const openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

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