BootStrap下拉列表没有正确设置样式使用navbar-inverse

Question

我正在尝试使用navbar-inverse和hover的属性进行下拉列表。我有悬停问题修复，它是navbar-inverse我无法弄清楚。我在互联网上搜索过，发现你是否使用过此代码

.inverse-dropdown {
  background-color: #222;
  border-color: #080808;
  &>li>a{
    color: #999;
    &:hover{
      color: #fff;
      background-color: #000;
    }
  }
}

它会使我想要的下拉颜色，但文字仍然很难看到。我已经尝试更改颜色标签，使文本成为我想要的，但它没有改变任何东西。使用该代码，我的下拉列表如下所示：

正如您所看到的，如果您查看图像，则文本很难阅读。有人可以帮助我，我一直试图这样做几天。

作为参考，这是下拉列表中的所有代码：

HTML：

<li class="dropdown">
        <a href="staff.html"><i class="fa fa-group"></i> Our Staff</a>
        <ul class="dropdown-menu inverse-dropdown text-center">
            <li><a href="http://aesny.net/aes">Employee Login</a></li>
        </ul>
    </li>

CSS：

.dropdown:hover .dropdown-menu {
    display: block;
}

.inverse-dropdown {
  background-color: #222;
  border-color: #080808;
  &>li>a{
    color: #999;
    &:hover{
      color: #fff;
      background-color: #000;
    }
  }
}

Answer 1

我发现了这个：

.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open 
.dropdown-menu {
  background-color: #222;
  color:#fff;
}

另外，你看到的颜色是＆＃34;访问过的＆＃34;版链接？你可以张贴整个导航栏吗？

Answer 2

.dropdown-menu.menu-inverse {
    background-color: #222;
    border-color: #080808;
}

.dropdown-menu.menu-inverse li > a {
    color: #9d9d9d !important;
}

.dropdown-menu.menu-inverse ul > li > a:hover {
    color: #fff;
    background-color: #000;
}

.dropdown-menu.menu-inverse li.divider {
    background-color: #000;
}

这个 CSS 只是来自@ CalmKai答案的 LESS 的编译版本（直接来自GitHub问题）。

我的应用在顶部导航栏中显示了用户名，因此也反过来了：

.navbar-inverse #appMenuUsername {
    color: #9d9d9d
}