当我单击菜单时，Bootstrap 3 下拉菜单悬停颜色恢复为默认值？

Question

我创建了一个带有自定义样式的导航栏，并且在大多数情况下它运行良好。但是，我使用以下 CSS 将菜单/下拉项的“悬停”颜色设置为绿色，虽然这通常有效，但如果我选择下拉菜单，原始菜单项会显示为绿色，直到我点击离开（并关闭下拉菜单），此时它会在失去颜色之前闪烁浅灰色（我相信默认设置）。我一辈子都无法弄清楚我错过了什么？

.rpfb-navbar .navbar-nav > li > a:hover,
.rpfb-navbar .navbar-nav > li > a:focus,
.rpfb-navbar .navbar-nav > .active > a,
.rpfb-navbar .navbar-nav > .active > a:hover,
.rpfb-navbar .navbar-nav > .active > a:focus,
.rpfb-navbar .open .dropdown-menu > li > a:hover,
.rpfb-navbar .open .dropdown-menu > li > a:focus,
.rpfb-navbar .open .dropdown-menu > .active > a,
.rpfb-navbar .open .dropdown-menu > .active > a:hover,
.rpfb-navbar .open .dropdown-menu > .active > a:focus {
    background-color: #a2cc3a;
    color: #fff;
}

Answer 1

.nav .open>a:focus {background-color: transparent;/或任何你想要的颜色/ }

Answer 2

那是因为您没有为“活动”状态添加样式。 试试这个：

.rpfb-navbar .navbar-nav > li > a:hover,
.rpfb-navbar .navbar-nav > li > a:focus,
.rpfb-navbar .navbar-nav > li > a:active,
.rpfb-navbar .navbar-nav > .active > a,
.rpfb-navbar .navbar-nav > .active > a:hover,
.rpfb-navbar .navbar-nav > .active > a:focus,
.rpfb-navbar .navbar-nav > .active > a:active,
.rpfb-navbar .open .dropdown-menu > li > a:hover,
.rpfb-navbar .open .dropdown-menu > li > a:focus,
.rpfb-navbar .open .dropdown-menu > li > a:active,
.rpfb-navbar .open .dropdown-menu > .active > a,
.rpfb-navbar .open .dropdown-menu > .active > a:hover,
.rpfb-navbar .open .dropdown-menu > .active > a:focus,
.rpfb-navbar .open .dropdown-menu > .active > a:active {
    background-color: #a2cc3a;
    color: #fff;
}

Answer 3

自定义时，您可以在官方 Bootstrap 网站上更改 LESS 变量中的下拉菜单颜色。

@component-active-bg

是您需要编辑以更改背景颜色的变量。

@component-active-color

是编辑活动项目颜色的变量。