Раскрывающиеся страницы BootStrap неправильно оформляются с помощью navbar-inverse

Question

Я пытаюсь сделать раскрывающийся список со свойствами navbar-inverse и hover. У меня исправлена ​​проблема при наведении курсора, это навигация с обратной навигацией, я не могу понять. Я искал в Интернете и нашел, если вы использовали этот код

.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;
}

Кроме того, возможно ли, что цвет, который вы видите, является "посещаемой" версией ссылки? Не могли бы вы опубликовать весь свой navbar?

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 - только что скомпилированная версия LESS из ответа @CalmKai (которая прямо связана с проблемой GitHub).

В моих приложениях имя пользователя отображается в верхней панели навигации, поэтому для него оно также обратное:

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