html - 打开时 Bootstrap 4 导航选项卡下拉菜单颜色

Question

我试图在打开时更改导航选项卡中下拉菜单的颜色(在本例中为蓝色和红色)，但当我松开鼠标时它又变回白色。当下拉菜单显示为白色时，我将如何做到这一点，而是保持蓝色？如果有人可以提供帮助，我的代码如下。

What it looks like right now

我的HTML

<ul class="nav nav-tabs nav-justified">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Projects</a>
        <div class="dropdown-menu dropdown-menu-center">
            <a class="dropdown-item" href="#algorithms-data">Algorithms and Data Structures</a>
            <a class="dropdown-item" href="#programming-lab">Programming Lab</a>
            <a class="dropdown-item" href="#computer-systems">Computer Systems Organization</a>
        </div>
    </li>
</ul>

我的CSS:

.dropdown-menu {
    background-color: var(--dark-gray);
    border-top: 1px solid white;
    border-right: 1px solid white;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
}

.dropdown-item:hover {
    background-color: var(--gray);
}

.dropdown-toggle.active {
    background-color: blue;
}

.dropdown-toggle:active, .open .dropdown-toggle {
    background-color: blue !important;
    color: red !important;
}

Answer 1

使用:focus

.dropdown-toggle:focus{...}

.dropdown-menu {
    background-color: var(--dark-gray);
    border-top: 1px solid white;
    border-right: 1px solid white;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
}

.dropdown-item:hover {
    background-color: var(--gray);
}

.dropdown-toggle.active {
    background-color: blue;
}

.dropdown-toggle:active, .open .dropdown-toggle,.dropdown-toggle:focus {
    background-color: blue !important;
    color: red !important;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs nav-justified">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Projects</a>
        <div class="dropdown-menu dropdown-menu-center">
            <a class="dropdown-item" href="#algorithms-data">Algorithms and Data Structures</a>
            <a class="dropdown-item" href="#programming-lab">Programming Lab</a>
            <a class="dropdown-item" href="#computer-systems">Computer Systems Organization</a>
        </div>
    </li>
</ul>