交互式媒体课程项目：Dropdown Menu对齐异常求助

问题根源 #

下拉菜单偏移的核心原因有两点：

1. .dropdown 使用 display: inline，尽管设置了 position: relative，但inline元素无法为绝对定位子元素提供稳定的定位基准，导致后续下拉菜单都以页面或首个块级容器为定位起点。
2. .dropdown-content 未设置明确的定位偏移属性，默认位置偏离对应按钮。

修复方案 #

修改以下CSS规则即可解决问题：

1. 调整.dropdown的显示方式，让每个下拉容器成为独立的块级行内元素：

.dropdown {
    height: 100%;
    position: relative;
    display: inline-block; /* 替换原display: inline */
    vertical-align: middle;
    text-align: center;
    width: 33%; /* 与按钮宽度匹配，确保容器宽度一致 */
}

2. 给.dropdown-content添加明确的定位偏移，使其对齐对应按钮的底部和左侧：

.dropdown-content {
    width: 100%;
    position: absolute;
    left: 0; /* 对齐容器左侧 */
    top: 100%; /* 从按钮底部开始显示 */
    box-shadow: 0px 0px;
    padding: 0px 0px;
    z-index: 1;
    opacity: 0;
    align-content: center;
    transition: 200ms ease-in-out;
    text-align: center;
}

3. 可选优化：调整.navButton的宽度，让按钮填满容器，避免宽度偏差：

.navButton {
    width: 100%; /* 替换原33%，让按钮填满dropdown容器 */
    background-color: #000000;
    border: solid #222222;
    color: aliceblue;
    font-size: 56px;
    padding: 0px 4px;
    text-decoration: none;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}

修复原理 #

• display: inline-block 让每个.dropdown成为独立的定位容器，绝对定位的.dropdown-content会以各自父容器为基准。
• left: 0 和 top: 100% 确保下拉菜单从按钮底部左侧开始渲染，完美对齐上方按钮。
• 统一容器与按钮宽度，避免因宽度不一致导致的对齐偏差。

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