调整高度时汉堡菜单上的背景重复

问：

在我的汉堡菜单中，当我尝试调整背景颜色的高度时，背景颜色会重复

.bm-menu {
    background-color: rgba(255, 255, 255, 0.9);
    height: 60vh;
    position: fixed;
    transition: top 0.3s;
    top: 50px;
    right: 0;
    left: 0;
    width: 100%;
    border-radius: 30px;
    z-index: 1001;
}


    <div className="bm-menu">
      <Menu isOpen={menuOpen} onStateChange={({ isOpen }) => toggleMenu(isOpen)}>
        <div className="menu-content">
          <a className="menu-item" href="#">Login</a>
          <Link to="/about" className="menu-item">About Us</Link>
          <a className="menu-item" href="#">Membership Plans</a>
          <Link to="/contact" className="menu-item">Contact Us</Link>
        </div>
      </Menu>
    </div>

带高度：60vh;它复制了我想要的高度。但它就像上面的一个额外层，向下延伸到整个视口。

有什么提示或想法吗？

我已经尝试了所有方法，但没有任何效果。