title: Changing the text color of a Bootstrap dropdown item
body: <p>I'm trying to change the color of a dropdown menu's elements. The dropdown is made with the following HTML:</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
      &lt;a class="btn"&gt;Confirm&lt;/a&gt;
      &lt;a href="#" id="drop_thought" role="button" class="dropdown-toggle btn white-text" data-toggle="dropdown"&gt;v&lt;/a&gt;
      &lt;ul class="dropdown-menu white-text" id="tools_drop" role="menu" aria- labelledby="drop_thought"&gt;
          &lt;li&gt;&lt;a class="btn btn-success white-text"&gt;Okay&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="btn btn-warning"&gt;Unload&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="btn btn-danger"&gt;Quarantine&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="btn btn-primary"&gt;Permanent&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've erased the IDs for easy reading.</p>
  
  <p>I made a CSS class like the following:</p>
  
  <pre><code>.white-text {
      color: #FFFFFF; !important
  }
  </code></pre>
  
  <p>I thought the <code>!important</code> would automatically make the Okay into white, but it's still black. I looked at the enclosed <code>&lt;li&gt;&lt;a&gt;...&lt;/a&gt;&lt;/li&gt;</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.</p>
  
  <p>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:</p>
  
  <pre><code>.dropdown-menu a{
      color: #FFFFFF; !important
  }
  </code></pre>
  
  <p>Here's the inheritance chain according to Chrome:</p>
  
  <pre><code>.dropdown-menu li &gt; a:hover, .dropdown-menu li &gt; a:focus, .dropdown-submenu:hover &gt; 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
  </code></pre>