BootStrap Dropdowns Not Being Styled Properly With navbar-inverse - html

Question

I am trying to make a dropdown with the properties of navbar-inverse and on hover. I have the on hover problem fixed, it is the navbar-inverse I can not figure out. I have searched the internet and found if you used this code
.inverse-dropdown {
background-color: #222;
border-color: #080808;
&>li>a{
color: #999;
&:hover{
color: #fff;
background-color: #000;
}
}
}
it would make the dropdown color what I wanted, but the text remained very hard to see. I have tried changing the color tag to make the text what I wanted but it did not change anything. With that code my dropdown looks like this:
As you can see if you look at the image, the text is hard to read. Can someone please help me I have been trying to do this for days.
For reference this is all code that goes with the dropdown:
HTML:
<li class="dropdown">
<i class="fa fa-group"></i> Our Staff
<ul class="dropdown-menu inverse-dropdown text-center">
<li>Employee Login</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

I found this:
.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open
.dropdown-menu {
background-color: #222;
color:#fff;
}
Also, could it be that the color you see is the "visited" version of the link? Could you post your whole 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;
}
This CSS is just compiled version of LESS from #CalmKai's answer (which is straight off the GitHub issue).
My apps show the username in the top navbar, so inverse for it too:
.navbar-inverse #appMenuUsername {
color: #9d9d9d
}