title: Custom Style the Bootstrap Dropdown menu
body: <p>I want to have my bootstrap dropdown menu in some Font-color and background-color and while i'm clicking the particular tab the tab background and font color want to be changed and i also want to change the tab background on hover (or) mouseover. I have used some specific styles to change the font-color of particular clicking tab but its color is not changing while i'm hover it.</p>
  
  <p>This is my bootstrap twitter dropdown menu</p>
  
  <pre><code>  &lt;a href="#show_tab"  class="dropdown " data-toggle="dropdown" aria-expanded="false"&gt;
      Reviews &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;div class="btn-group" style="display: none;"&gt;
      &lt;ul class="dropdown-menu" role="menu"&gt;
       &lt;li&gt;&lt;a href="#tab1"&gt;Tasks &lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#tab2"&gt; Tasks1&lt;/a&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab3" &gt;Task3&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>in this by using the jquery i have shown the dropdown menu</p>
  
  <pre><code>&lt;script&gt;
  $(function(){
     $("a[href='#show_tab']").on(function(e){
       $(".btn-group").show();
       $(".btn-group").toggleClass('btn-group btn-group open');
      });
  });
  &lt;/script&gt;
  </code></pre>