Change font color of active dropdown menu - html

Question

I am only a beginner in bootstrap and have a hard time figuring out how to change the css to my liking. I have a dropdown menu in my header and was able to change the colours. However, when the dropwdownmenu is selected, the font colour stays the same? How do I change this? I tried following:
.dropdown-toggle:active, .open .dropdown-toggle {
background:#ffffff !important;
color:#7dc623 !important;
}
but that doesn't change anything.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
</div>
</li>
</ul>
</div>
</nav>
See the background is green, but the text is black, but should be white.
see screenshot

Answer 1

Removing .open from the code did the trick:
.dropdown-toggle:active, .dropdown-toggle {
background:#ffffff !important;
color:#7dc623 !important;
}

Answer 2

Applying your CSS properties on directly on a tag may cause certain issues, it would be advisable to use a span between the a tag for your text.
ie:
.navbar{
background-color: #FFFF99 !important;
}
.text_in_span{
color: #7dc623 !important;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"><span class="text_in_span">Link 1</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="text_in_span">Link 2</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="text_in_span">Dropdown</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#"><span class="text_in_span">Link 3</span></a>
<a class="dropdown-item" href="#"><span class="text_in_span">Link 4</span></a>
</div>
</li>
</ul>
</div>
</nav>
I guess that should do the trick, cheers.