title: Bootstrap hover effect not working as expected in IE 11
body: <p>Below is my <code>div</code> structure. I'm trying to create mega menu. like when user hover on<code>button</code> inside <code>dropdown</code> class the menu will appear with <code>slideDown</code>/<code>slideUp</code> effect. but initially it was not working even in chrome and behave like, menu started slidingDown/up when hover on any places in <code>dropdown</code> div, </p>
  
  <p>i.e the hover effect applied on whole div instead of on hovering on button. so i used <code>display:contents</code> property for chrome and got fixed, but the same fix is not working for IE 11 because <code>display:contents</code> is not supported in IE 11.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="dropdown"&gt;
          &lt;button class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"&gt;
              &lt;span class="btn"&gt;Hover to see menu&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="dropdown-menu"&gt;
              &lt;!-- for responsive bootstrap grid combination will here --&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-2 col-md-3 col-lg-2"&gt;&lt;/div&gt;
                  &lt;div class="col-sm-2 col-md-3 col-lg-2"&gt;&lt;/div&gt;
                  &lt;div class="col-sm-2 col-md-3 col-lg-2"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>to be precise and clear, i want apply hover effect and show menu slidingUP/down only when user do hover inside the div contents not anywhere on entire div. spend nearly 3 days on this but no luck.</p>
  
  <p>Thanks for helping me.</p>