CSS下拉菜单样式问题：如何让下拉菜单定位在触发按钮下方不撑开容器

• 第一步：给包裹「View The Perceptors」按钮的直接父容器添加position: relative属性，将其设置为下拉菜单的定位基准，绝对定位的下拉菜单会脱离常规文档流，不会再撑开外层容器。
• 第二步：给.dropdown类补充定位偏移属性，实现按钮左下方对齐的需求，调整后完整代码如下：

  .dropdown {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    color: white;
    padding: 2.4em;
    gap: 65px;
    /* width: 100%; */
    background-color: #181024;
    /* 新增以下两行定位属性 */
    top: 100%;
    left: 0;
  }
  

• 第三步：如果出现下拉菜单被裁剪的情况，检查外层所有祖先元素是否设置了overflow: hidden，移除该属性即可；如果需要限制下拉菜单宽度不超出外层导航容器，可以额外添加max-width: 对应外层容器的实际宽度值属性。

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