如何让dropdown菜单在关联div元素正下方展开？

要让下拉内容始终在触发它的.dropdown元素正下方展开，需要调整定位属性和布局规则，修改后的代码如下：

修改后的CSS #

.dropdown {
  position: relative;
  float: right; /* 让下拉容器和其他菜单元素对齐 */
}

.dropdown-content {
    display: none;
    position: absolute; /* 相对于父元素.position:relative定位 */
    top: 100%; /* 紧贴父元素底部 */
    left: 0; /* 与父元素左边界对齐，需右对齐可改为right:0 */
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    width: 100%; /* 可选：让下拉框宽度和父元素一致 */
}

.top-menu {
  overflow: hidden; /* 清除内部浮动，避免父元素高度塌陷 */
}

.top-menu a{
    color: black;
    float: right;
    right:0;
    text-align: center;
    padding: 24px 26px;
    text-decoration: none;
}

[class*="col-"] {
    float: left;
    padding: 15px;
}

.col-12 {width: 100%; align-items:normal;}

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

修改后的HTML（结构无需调整） #

<!DOCTYPE html>
<html>
<body>
<div class="col-12">
<header>
<div class="top-menu" id="myTopnav">
<div><a href="#">Item 3</a></div>
<div><a href="#" target="_blank">Item 2</a></div>
<div class="dropdown">
  <a>Item 1 (dropdown)</a>
  <div class="dropdown-content">
  <div><a>1</a></div>
<div><a>2</a></div>
<div><a>3</a></div>
<div><a>4</a></div>
<div><a>5</a></div>
  
  </div>
</div>
</div>
</header>
</div>

</body>
</html>

关键修改说明 #

• 给.dropdown添加float: right：让下拉容器和其他右侧浮动的菜单元素保持同一行，避免布局错位。
• 将.dropdown-content的position从relative改为absolute：绝对定位元素会相对于最近的position:relative父元素（即.dropdown）定位，不会干扰其他元素布局。
• 添加top: 100%：让下拉内容紧贴父元素底部，实现"正下方"效果；left:0保证下拉框左边界与父元素对齐，需右对齐可改为right:0。
• 给.top-menu添加overflow:hidden：清除内部浮动导致的父元素高度塌陷问题，确保菜单区域布局稳定。

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