Изменить цвет шрифта активного раскрывающегося меню

Question

Я только новичок в bootstrap, и мне трудно понять, как изменить css по своему вкусу. У меня есть раскрывающееся меню в моем заголовке, и я могу изменить цвета. Однако, когда выбрано раскрывающееся меню, цвет шрифта остается прежним? Как мне это изменить? Я пробовал следующее: .dropdown-toggle:active, .open .dropdown-toggle { background:#ffffff !important; color:#7dc623 !important; }, но это ничего не меняет.

						<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>

См. Фон зеленый, но текст черный, но должен быть белым.

см. Снимок экрана

Answer 1

Удаление .open из кода помогло:

.dropdown-toggle:active, .dropdown-toggle {
    background:#ffffff !important; 
    color:#7dc623 !important;
}

Answer 2

Применение ваших свойств CSS непосредственно к тегу a может вызвать определенные проблемы, рекомендуется использовать span между тегом a для вашего текста.

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>

Думаю, это должно помочь, ура.