disappearing and flickering dropdown menu - html

Question

I have a dropdown menu that is activated with a button within my navbar. When the dropdown menu button is activated then 95% of the menu disappears when the mouse hovers over the navbar and other buttons. Furthermore, I cannot select any of the dropdown menu items without the menu flickering. I'm looking to have the menu work as illustrated in the image below without the navbar being out of whack. Any help is appreciated :)
I think it may be a div sizing issue. I have played around with the .card CSS and noticed that if the height of the Navbar, and the card it sits on, is greater than the height of the menu then the menu becomes fully functional without the issues above. I have also played around with z-index to make sure the component stays in front but the result is the same. I have attached a few files to illustrate the issue/troubleshooting.
Navbar component CSS:
div.navbar-div{
display: inline;
top: 0;
justify-content: center;
background-color: #FFFFFF;
color: #FFFFFF;
}
.logo-img{
display: flex;
height: 30%;
}
.navbar-card{
z-index: 990;
display: flex;
width: fit-content;
border-radius: 50px;
top: 0;
position: sticky;
margin: 10px 20px;
transform:scale(1, 1);
transition: 0.0s;
&:hover{
overflow: hidden;
transform: scale(1.00);
}
}
.sticky-top{
display: flex;
width: max-content;
border-radius: 50px;
margin: 10px 0px 10px 0px;
}
.navbar-collapse{
width: max-content;
}
.nav-item{
position: relative;
padding: 0px 4px;
}
.navbar-nav{
display: flex;
position: fix;
justify-content: center;
}
.btn-pill{
padding: 5px 15px 5px 15px;
color: #FFFFFF;
font-size: medium;
margin: 0% 0.5% 0% 0.5%;
}
.button-icon{
margin: 0px 10px 0px 0px;
}
.shopping-cart > .button-icon{
margin: 0px 0px 0px 0px;
}
.btn{
width: 100%;
height: 40px;
white-space: nowrap;
}
.search-box-container{
width: 50px;
height: 40px;
}
Dropdown Menu component:
function NavDropdownMenu () {
function DropDownItem(props){
return(
<a href="#" className="menu-item">
<span className="icon-button">{props.leftIcon}</span>
{props.children}
<span className="icon-right">{props.rightIcon}</span>
</a>
);
}
return(
<div className="dropdown">
{/* <DropDownItem>Test</DropDownItem> */}
<DropDownItem
leftIcon={<RiKnifeLine/>}
rightIcon={<FaRegArrowAltCircleRight/>}>
</DropDownItem>
<DropDownItem
leftIcon={<RiKnifeLine/>}
rightIcon={<FaRegArrowAltCircleRight/>}>
</DropDownItem>
<DropDownItem
leftIcon={<RiKnifeLine/>}
rightIcon={<FaRegArrowAltCircleRight/>}>
</DropDownItem>
<DropDownItem
leftIcon={<RiKnifeLine/>}
rightIcon={<FaRegArrowAltCircleRight/>}>
</DropDownItem>
</div>
);
Dropdown Component CSS:
.dropdown{
position: absolute;
top: 58px;
right: 22%;
width: 300px;
transform: translate(-45%);
background-color: #ddd;
// border: ;
border-radius: 15px;
padding: 1rem;
overflow: hidden;
z-index: 999;
}
.menu-item{
height: 55px;
display: flex;
align-items: center;
border-radius: 10px;
transition: background(500ms);
padding: 0.5rem;
// position: absolute;
}
.menu-item:hover{
background-color: #fff;
}
.icon-right{
margin-left: auto;
}
Cheers

Answer 1

removed several attributes and until I figured out my navbar had overflow: hidden. Changed to visible and it now displays the dropdown without flickering.