title: bootstrap dropdown menu broken on low resolution
body: <p>I've a pretty straightforward bootstrap menu that collapse when screen width is under 768px </p>
  
  <pre><code>&lt;div id="headerNavbar" class="navbar navbar-default"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#headerMenu"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="headerMenu" class="collapse navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;a&gt;temp&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;DATA &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a&gt;temp&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a&gt;temp&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;TOOLS &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a&gt;temp&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a&gt;temp&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This works fine but I want to auto-open first level link on mouse hover only when screen width is more than 768px, so I added this piece of code</p>
  
  <pre><code>$(document).ready(function () {
      $('.navbar-default .navbar-nav &gt; li.dropdown').hover(function () {
          if (window.innerWidth &gt; 767) {
              $('ul.dropdown-menu', this).stop(true, true).slideDown(0);
              $(this).addClass('open');
          }
      }, function () {
          if (window.innerWidth &gt; 767) {
              $('ul.dropdown-menu', this).stop(true, true).slideUp(0);
              $(this).removeClass('open');
          }
      });
  });
  </code></pre>
  
  <p>On full screen it works, but if window is full screen then it's resized under 768 menu stop working (eg: click doesn't work) until it is enlarged again and auto-expand will work again.</p>
  
  <p>How can I solve this? Is there a kind of reset to apply to dropdown mechanism?</p>