I want to create a dropdown menu in my black navbar, but the text color becomes blue and the background of the pop-up turns white, which clashes with my black background. I need it to be transparent while using Bootstrap v4.1.1
<nav className="navbar navbar-expand-md navbar-dark bg-dark">
<a className="navbar-brand" href="/home">home</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"/>
</button>
<div className="collapse navbar-collapse" id="navbarColor01">
<ul className="navbar-nav mr-auto">
<li className="nav-item">
<a className="nav-link" href="/user">Users</a>
</li>
<li className="nav-item" >
<li className="dropdown nav-link">
<a className="dropdown-toggle" data-toggle="dropdown" href="#">Create new
</a>
<ul className="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
</li>
</ul>
</div>
</nav>
The "create new" text and page links must be white, and when I click on "create new," the box with the pages should be transparent.
How can I achieve this? I've attempted adding the following CSS:
.dropdown a{
color: rgba(255,255,255,.5);
}
However, this causes the pages not to show up when clicked, just showing a white box instead.
Thanks