Changer la couleur du texte d'un Bootstrap déroulant élément

Je suis en train de modifier la couleur d'un menu déroulant éléments. La liste déroulante est faite avec le code HTML suivant:

<div class="btn-group">
    <a class="btn">Confirm</a>
    <a href="#" id="drop_thought" role="button" class="dropdown-toggle btn white-text" data-toggle="dropdown">v</a>
    <ul class="dropdown-menu white-text" id="tools_drop" role="menu" aria- labelledby="drop_thought">
        <li><a class="btn btn-success white-text">Okay</a></li>
        <li><a class="btn btn-warning">Unload</a></li>
        <li><a class="btn btn-danger">Quarantine</a></li>
        <li class="divider"></li>
        <li><a class="btn btn-primary">Permanent</a></li>
    </ul>
</div>

J'ai effacé les codes pour en faciliter la lecture.

J'ai fait une classe CSS comme suit:

.white-text {
    color: #FFFFFF; !important
}

Je pensais que le !important ferait automatiquement le Bon en blanc, mais il est encore noir. J'ai regardé le clos <li><a>...</a></li> élément avec white-text sous Chrome developer console et il semble que .dropdown-menu a est la classe c'est d'hériter de. Pour une raison quelconque, mon white-text est ignoré et a une grève à travers.

En utilisant le code CSS suivant, j'ai été en mesure de modifier la couleur du texte à blanc, mais je suis à l'aide des listes déroulantes dans un autre endroit, donc je ne peux pas utiliser ce:

.dropdown-menu a{
    color: #FFFFFF; !important
}

Voici la chaîne d'héritage selon google Chrome:

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a - #ffffff
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] - #ffffff
.btn:hover - #333333
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] - #333333 .dropdown-menu a - #333333
a:hover - #005580
.white-text - #FFFFFF
.btn-success - #ffffff
.btn - #333333
a - #0088cc
.white-text - #FFFFFF
body - #333333
InformationsquelleAutor Aaron Reba | 2013-01-18