React-bootstrap/NavDropdown is hiding under the things below menubar (overlaping)

问题

NavDropdown is hiding under the things which contain the slider and body or below the menubar. I tried z-index: lower/higher number than mycontainer and drop-top ClassName. Even this dropdown does not come on top but it working in the responsive mobile screen test (in dev tool)

style.css

.drop-top {
z-index: 1000;
display: block;
position: static;
width: 100%;
color: #61dafb;
position: sticky;
top: 0;
}
.mycontainer{
  z-index: 101;
    margin-right: auto;
    margin-left: auto;
    display: block;
}
.tata {
  overflow: hidden;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  font-family:Helvetica, Arial, sans-serif, Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14;

}

app.js

 <div className="mycontainer  tata">
                        <div className=" ">
                            <Navbar bg="transparent" className="container" expand="lg">
                                <Navbar.Brand>
                                    <div>
                                        <Link className="nav-link" to="/"> <img src={logo} alt="logo" height="63" width="221" to="/" /></Link>


                                    </div>
                                </Navbar.Brand>

                                <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
                                <Navbar.Collapse id="navbar-toggle" style={{ fontSize: 18, textAlign: "center", paddingTop: 35, }}>
                                    <Nav className="ml-auto" >
                                        <NavLink exact  className="nav-link" to="/">Home</NavLink>
                                        <NavDropdown exact title="Program-1" id="basic-nav-dropdown" className=" drop-top">
                                            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                                            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                                            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                                            <NavDropdown.Divider />
                                            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                                        </NavDropdown>
                                        <NavLink exact className="nav-link" to="/program">Program</NavLink>
                                        <NavLink exact className="nav-link" to="/about">About</NavLink>

                                        <NavLink className="nav-link" to="/career">Career</NavLink>
                                        <NavLink exact  className="nav-link" to="/corporate">Corporate</NavLink>
                                        <NavLink exact  className="nav-link" to="/contact">Contact</NavLink>

                                    </Nav>
                                </Navbar.Collapse>
                            </Navbar>
                        </div>
                    </div>

来源：https://stackoverflow.com/questions/61491994/react-bootstrap-navdropdown-is-hiding-under-the-things-below-menubar-overlaping