I'm having an issue with the background of my dropdown menu not showing properly. The text within the dropdown items is appearing without a background, making it look like they are floating in a line on the page. I've tried adjusting the z-index to 10 for the menu but it doesn't seem to be working. I'm puzzled by this problem.
<Dropdown
toggle={() => handleToggle(item.label)}
isOpen={isOpen === item.label}
className="adminTools"
inNavbar
>
<DropdownToggle nav>{item.label}</DropdownToggle>
<DropdownMenu className="menu">
{item.value.map((menuItem, id) => (
<>
<DropdownItem className="dropdownItem p-0" >
<NavLink
tag={Link}
to={menuItem.link}
key={`${id}-${menuItem.value}-link`}
className="nav-link"
>
{menuItem.label}
</NavLink>
</DropdownItem>
</>
))}
</DropdownMenu>
</Dropdown>
.menu {
width: 175px;
font-size: 14px;
}
.dropdownItem {
white-space: pre-wrap;
}
.nav-link {
font-weight: bold;
color: rgba(32, 30, 30, 0.829);
}