相对定位父元素的绝对定位子元素表现异常，求纯CSS解决方案

• 定位基准错误：你把position: relative加在了整个导航栏的<ul class="navbar">上，但绝对定位的dropContent会以最近的非static定位祖先为基准。由于你的dropBox/navItem没有设置定位，dropContent只能以整个导航栏为基准，所以会覆盖在导航栏上方，而非单个下拉标题的下方。
• 百分比margin理解偏差：绝对定位元素的margin-top: 100%是基于包含块的宽度计算的，不是高度；如果没有正确设置包含块（即没有给父元素加position: relative），它会以视口作为包含块，直接把元素推到视口底部，这和你想要的效果完全不符。

HTML（保留你的结构，补全示例内容） #

<body>
    <ul class='navbar'>
        <li class='navItem'>
            <div class='dropBox'>
                <div class='dropTitle'>
                    Careers
                </div>
                <div class='dropContent'>
                    <a href="#">HR Roles</a>
                    <a href="#">IT Roles</a>
                    <a href="#">Marketing Roles</a>
                </div>
            </div>
        </li>
        <li class='navItem'>
            <a href="#">Home</a>
        </li>
    </ul>
</body>

CSS #

/* 重置默认样式，消除浏览器默认干扰 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar {
    display: flex; /* 导航项横向排列 */
    background-color: #f0f0f0;
    list-style: none;
    padding: 0 1rem;
}

.navItem {
    position: relative; /* 设置为下拉内容的定位基准 */
    padding: 1rem;
    cursor: pointer;
}

/* 下拉内容默认隐藏 */
.dropBox .dropContent {
    position: absolute;
    top: 100%; /* 对齐到父元素底部 */
    left: 0;
    background-color: white;
    border: 1px solid #ddd;
    min-width: 150px;
    display: none;
}

/* hover时显示下拉菜单 */
.dropBox:hover .dropContent {
    display: block;
}

.dropContent a {
    display: block;
    padding: 0.8rem 1rem;
    text-decoration: none;
    color: #333;
}

.dropContent a:hover {
    background-color: #f5f5f5;
}

关键说明 #

1. 将position: relative添加到navItem（或dropBox）上，让dropContent以单个导航项为定位基准。
2. 用top: 100%替代margin-top，确保下拉菜单精准对齐到导航项底部，这个百分比基于父元素高度计算，完全匹配需求。
3. 通过hover伪类实现下拉菜单的显示/隐藏交互，无需JavaScript。

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