title: Correct CSS for overriding a drop dwn menu item in bootstrap
body: <p>I have the following CSS (which is loaded last in the page)</p>
  
  <pre><code>.dropdown-menu-normal:hover,
  .dropdown-menu-normal a:hover
  {
      background: transparent!important;
      color: #5cac7c;
      text-decoration: underline!important;
      text-align: right;
      float: right;
  }
  
  .dropdown-menu-normal,
  .dropdown-menu-normal a
  {
      color: #5cac7c!important;
      text-align: right;
      float: right;
  }
  </code></pre>
  
  <p>This class is applied to a LI element in a standard bootstrap drop down menu.</p>
  
  <p>This styles a drop down menu item like a normal link floated right in the menu.  Now I can not get the selectors correct to use this CSS without the !important flags can anyone help out?</p>
  
  <p>I know I can just run with this but I really hate having to use !important for something which I should be able to replace directly.</p>
  
  <p>jsFiddle of how it should look using !important <a href="http://jsfiddle.net/y67qP/" rel="nofollow">http://jsfiddle.net/y67qP/</a></p>
  
  <p>jsFiddle of it without <a href="http://jsfiddle.net/y67qP/1/" rel="nofollow">http://jsfiddle.net/y67qP/1/</a></p>