title: Bootstrap 3 dropdown transition
body: <p>Firstly here's the <a href="http://jsfiddle.net/krish7878/pjej7o2m/" rel="noreferrer">fiddle</a> </p>
  
  <p>Just a regular bootstrap dropdown, I made a few changes to css so that the dropdown appears on hover (instead of click) but how do I want a very simple fade animation. I tried css transition but it didn't work because the .dropdown-menu element has a 'display: none' applied to it, on hover it changes to 'display: block'. How do I animate an element which changes from 'diplay: none' to 'display: block' or is there any other method to achieve this?</p>
  
  <p>I've already googled this and found out some answer but they didn't help. </p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div class="dropdown"&gt;
    &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"&gt;
      Dropdown
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
      &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS Code: </p>
  
  <pre><code>.dropdown .dropdown-menu{
  opacity: 0;
  transition:         all 400ms ease;
  -moz-transition:    all 400ms ease;
  -webkit-transition: all 400ms ease;
  -o-transition:      all 400ms ease;
  -ms-transition:     all 400ms ease;
  }
  .dropdown:hover .dropdown-menu {
      display: block;
      opacity: 1;
  }
  </code></pre>