我的下拉菜单与顶部的内容重叠

Question

我正在尝试创建3个下拉菜单，这是它的外观（我只有4个示例）：

我创建了一个 React.js 脚本，该脚本在单击按钮时显示和隐藏下拉菜单，但这是我的实际经验（我将每个div划分为特殊颜色）

以下是 HTML 和 CSS 代码：

<div className="search-trails">
    <div className="search-container">
        <IconContext.Provider value={{className: "search-outline", size: "2.5em"}}>
            <input className="search" type="text" /><HiOutlineSearch />
       </IconContext.Provider>
    </div>
    <div className="parameters">
        <div className={isShown ? "param-container param-container-active" : "param-container"}>
            <div className="btn-title">
                <p>Type</p>
                <button
                    className="popUp-btn"
                    onClick={() => setIsShown(!isShown)}
                >
                    <IconContext.Provider value={{className: "chevron", size: "3em"}}>
                        <HiChevronDown />
                    </IconContext.Provider>
                </button>
            </div>
            <div className="params-list">
                {isShown && (
                    <div className="list">
                        <p>Forest</p>
                        <p>Swamp</p>
                        <p>Lake</p>
                    </div>
                    )
                }
            </div>
        </div>
    </div>
</div>

CSS：

.search-trails {
    background: red;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.search-container {
    background: blue;
    height: 30%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search {
    padding: 0 50px 0 75px;
    width: 45%;
    height: 30%;
    border-radius: 50px;
    background: var(--card);
    border: none;
    color: var(--text);
    font-size: 28px;
    font-family: Montserrat medium, sans-serif;
}

.search-outline {
    left: 376px;
    position: absolute;
    color: var(--text);
}

.parameters {
    background: green;
    width: 70%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.param-container-active {
    height: auto;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--card);
    border-radius: 25px;
}

我只提供了导致问题的标签和样式的信息，没有附加整个文件。