Changing the text color of a Bootstrap dropdown item

[JL94x4]

I'm trying to change the color of a dropdown menu's elements. The dropdown is made with the following HTML:\[code\]<div class="btn-group"> <a class="btn">Confirm</a> <a href="http://stackoverflow.com/questions/14405398/#" 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>\[/code\]I've erased the IDs for easy reading.I made a CSS class like the following:\[code\].white-text { color: #FFFFFF; !important}\[/code\]I thought the \[code\]!important\[/code\] would automatically make the Okay into white, but it's still black. I looked at the enclosed \[code\]<li><a>...</a></li>\[/code\] element with \[code\]white-text\[/code\] under Chrome's developer console and it seems that \[code\].dropdown-menu a\[/code\] is the class it's inheriting from. For some reason, my \[code\]white-text\[/code\] is ignored and has a strike through.Using the following CSS, I was able to change the text color to white, but I'm using dropdowns in another place, so I can't use this:\[code\].dropdown-menu a{ color: #FFFFFF; !important}\[/code\]Here's the inheritance chain according to Chrome:\[code\].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 - #333333a:hover - #005580.white-text - #FFFFFF.btn-success - #ffffff.btn - #333333a - #0088cc.white-text - #FFFFFFbody - #333333\[/code\]