Изменить цвет фона выпадающего списка boostrap, когда он станет активным, используя css

Question

Я хочу изменить цвет фона выпадающего списка, когда я щелкнул по нему. hover работает нормально, но active / focus не работает. Я использовал это в моей панели навигации.

.btn-danger {
  background-color: #800080;
}

.dropdown-menu {
  background-color: #800080;
}

.btn-danger:hover {
  background-color: #17a2b8;
}

.btn-danger:active {
  background-color: yellow;
}

.btn-danger:focus {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="dropdown">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Portfolio<span class="caret"></span>
        <ul class="dropdown-menu">
            <li><a href="https://www.jquery-az.com/">PS</a></li>
            <li><a href="https://www.jquery-az.com/">HS</a></li>
            <li><a href="https://www.jquery-az.com/">BV</a></li>
        </ul>
    </button>
</div>

Answer 1

Полагаю, вы хотите изменить dropdown-list после нажатия на dropdown-toggle, а не в самом списке. В этом случае следует выполнить следующее:

.dropdown-menu.show {
    background-color: yellow;
}

Убедитесь, что вы присваиваете своим элементам id или дифференцирующий класс, потому что в противном случае все выпадающие меню будут иметь этот цвет.