html - 下拉菜单样式，以便菜单显示在底部元素的顶部。CSS

Question

我正在做这个下拉菜单，我需要 CSS 方面的帮助。目前，当我单击它时，我的下拉菜单正在推送其下方的内容，我希望单击时下拉菜单保持在其下方组件的顶部。我会发送设计图片，所以每个人都可以理解我想要什么。我也会发送代码。

HTML 代码：

      <DocumentCard className={styles.cardContainer}>
        <DocumentCardImage height={120} imageFit={ImageFit.cover} imageSrc={TestImages.documentPreviewTwo} />
        <DocumentCardDetails>
          <div ref={this.myRef} className={styles.container}>
            <button type="button" onClick={this.handleButtonClick}
            >Politicas</button>
              {this.state.open && (
                <div className={styles.menu}>
                  <ul>
                    <li>Lorem impsun</li>
                    <li>Lorem impsun</li>
                    <li>Lorem impsun</li>
                    <li>Lorem impsun</li>
                    <li>Lorem impsun
                      <ul>
                        <li>Lorem impsun</li>
                        <li>Lorem impsun</li>
                      </ul>
                    </li>
                  </ul>
                </div>
              )}
          </div>
        </DocumentCardDetails>
      </DocumentCard>

CSS 代码

.cardContainer {
    width: 32%;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    margin-bottom: 35px;

    .container {
        position: relative;
        display: inline-block;

        button {
            width: 100%;
            padding-top: 15px;
            padding-left: 10px;
            color: #707070;
            border: none;
            text-align: left;
            text-decoration: none;
            font-size: 18px;
            line-height: 1.22;  

        }
        .menu {
            border: 1px solid red;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            z-index: 2;

            > ul {
                list-style-type: none;
                padding: 0;
                margin: 0;

                > li {
                    padding: 8px 12px;
                }
            }
        }

    }
}

所需结果的图像：

期望的结果

标签： htmlcssreactjssass