Coloring dropdown - css

Question

I would like to make a dropdown in my black navbar, However when I try this the color of the text is blue and if I click it the background of the popu is white and interferes with my black background, So I would like to make it transparent. 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>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</li>
</ul>
</div>
</nav>
So the "create new" has to be white and the page links have to be white as well. When I click on the create new the bow with the pages in it has to be transparent.
How would I do achieve this?
I have tried to put this in my css :
.dropdown a{
color: rgba(255,255,255,.5);
}
But when I do this it works however now the pages won't show up when I click on it, I just get a white box.
Thx

Answer 1

Use the bg-dark class on the dropdown. Also you'll want to use nav-link for the "Create new" link so that it's light like all the other links for navbar-dark.
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="/home">home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/user">Users</a>
</li>
<li class="nav-item">
</li>
<li class="dropdown">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">Create new
</a>
<ul class="dropdown-menu bg-dark">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/VKvvHSVl98

Answer 2

You can replace your code with my code start doing css everything going to work nicely
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/user">Users</a>
</li>
<ul class="nav-item" >
<li class="dropdown nav-link">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Create new
</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
</ul>
</div>