title: Response menu not collapsing and reloads page
body: <p>At <a href="http://www.dentalo.se/contact" rel="nofollow noreferrer">http://www.dentalo.se/contact</a> it is using a responsive menu for mobile devices.</p>
  
  <p>When clicking on the menu button it collapses the menu but the same time reloads the page.</p>
  
  <p>Can anyone tell my why and how I can fix it?</p>
  
  <p><img src="https://i.stack.imgur.com/Ip3cD.png" alt="enter image description here"></p>
  
  <p>Thanks for the time you are taking to help me.</p>
  
  <p>Edit</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;!-- BEGIN RESPONSIVE MENU TOGGLER --&gt;
              &lt;button type="button" class="navbar-toggle btn navbar-btn" data-toggle="collapse" data-target=".navbar-collapse"&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;!-- END RESPONSIVE MENU TOGGLER --&gt;
              &lt;!-- BEGIN LOGO (you can use logo image instead of text)--&gt;
              &lt;a class="navbar-brand logo-v1" href="/"&gt;
                  &lt;img src="/assets/img/logo_blue.png" id="logoimg" alt=""&gt;
              &lt;/a&gt;
              &lt;!-- END LOGO --&gt;
          &lt;/div&gt;
  
          &lt;!-- BEGIN TOP NAVIGATION MENU --&gt;
          &lt;div class="navbar-collapse collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li id="MainMenuHome"&gt;&lt;a href="/"&gt;Start&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown" id="MainMenuDentalo"&gt;
                      &lt;a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#"&gt;
                          Dentalo
                          &lt;i class="icon-angle-down"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li id="SubMenuAbout"&gt;&lt;a href="/about"&gt;Om Dentalo&lt;/a&gt;&lt;/li&gt;
                          &lt;li id="SubMenuJob"&gt;&lt;a href="/job"&gt;Lediga tjänster&lt;/a&gt;&lt;/li&gt;
                          &lt;li id="SubMenuConnect"&gt;&lt;a href="/connect"&gt;Anslut&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li id="MainMenuLogIn"&gt;&lt;a href="/login"&gt;Logga in&lt;/a&gt;&lt;/li&gt;
                  &lt;li id="MainMenuContact"&gt;&lt;a href="/contact"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="menu-search"&gt;
                      &lt;span class="sep"&gt;&lt;/span&gt;
                      &lt;i class="icon-search search-btn"&gt;&lt;/i&gt;
  
                      &lt;div class="search-box"&gt;
                          &lt;form action="#"&gt;
                              &lt;div class="input-group input-large"&gt;
                                  &lt;asp:TextBox runat="server" placeholder="Sök..." CssClass="form-control" ID="textBoxSearch"&gt;&lt;/asp:TextBox&gt;
                                  &lt;span class="input-group-btn"&gt;
                                      &lt;asp:Button runat="server" CssClass="btn theme-btn" ID="ButtonSearch" OnClick="ButtonSearch_Click" Text="Sök" /&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                      &lt;/div&gt; 
                  &lt;/li&gt;
              &lt;/ul&gt;                           
          &lt;/div&gt;
          &lt;!-- BEGIN TOP NAVIGATION MENU --&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>/*
   * Project: Twitter Bootstrap Hover Dropdown
   * Author: Cameron Spear
   * Contributors: Mattia Larentis
   *
   * Dependencies?: Twitter Bootstrap's Dropdown plugin
   *
   * A simple plugin to enable twitter bootstrap dropdowns to active on hover and provide a nice user experience.
   *
   * No license, do what you want. I'd love credit or a shoutout, though.
   *
   * http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/
   */
  ;(function($, window, undefined) {
      // outside the scope of the jQuery plugin to
      // keep track of all dropdowns
      var $allDropdowns = $();
  
      // if instantlyCloseOthers is true, then it will instantly
      // shut other nav items when a new one is hovered over
      $.fn.dropdownHover = function(options) {
  
          // the element we really care about
          // is the dropdown-toggle's parent
          $allDropdowns = $allDropdowns.add(this.parent());
  
          return this.each(function() {
              var $this = $(this),
                  $parent = $this.parent(),
                  defaults = {
                      delay: 500,
                      instantlyCloseOthers: true
                  },
                  data = {
                      delay: $(this).data('delay'),
                      instantlyCloseOthers: $(this).data('close-others')
                  },
                  settings = $.extend(true, {}, defaults, options, data),
                  timeout;
  
              $parent.hover(function(event) {
                  // so a neighbor can't open the dropdown
                  if(!$parent.hasClass('open') &amp;&amp; !$this.is(event.target)) {
                      return true;
                  }
  
                  if(shouldHover) {
                      if(settings.instantlyCloseOthers === true)
                          $allDropdowns.removeClass('open');
  
                      window.clearTimeout(timeout);
                      $parent.addClass('open');
                  }
              }, function() {
                  if(shouldHover) {
                      timeout = window.setTimeout(function() {
                          $parent.removeClass('open');
                      }, settings.delay);
                  }
  
              });
  
              // this helps with button groups!
              $this.hover(function() {
                  if(shouldHover) {
                      if(settings.instantlyCloseOthers === true)
                          $allDropdowns.removeClass('open');
  
                      window.clearTimeout(timeout);
                      $parent.addClass('open');
                  }
              });
  
              // handle submenus
              $parent.find('.dropdown-submenu').each(function(){
                  var $this = $(this);
                  var subTimeout;
                  $this.hover(function() {
                      if(shouldHover) {
                          window.clearTimeout(subTimeout);
                          $this.children('.dropdown-menu').show();
                          // always close submenu siblings instantly
                          $this.siblings().children('.dropdown-menu').hide();
                      }
                  }, function() {
                      var $submenu = $this.children('.dropdown-menu');
                      if(shouldHover) {
                          subTimeout = window.setTimeout(function() {
                              $submenu.hide();
                          }, settings.delay);
                      } else {
                          // emulate Twitter Bootstrap's default behavior
                          $submenu.hide();
                      }
                  });
              });
          });
      };
  
      // helper variables to guess if they are using a mouse
      var shouldHover = false,
          mouse_info = {
              hits: 0,
              x: null,
              y: null
          };
      $(document).ready(function() {
          // apply dropdownHover to all elements with the data-hover="dropdown" attribute
          $('[data-hover="dropdown"]').dropdownHover();
  
          // if the mouse movements are "smooth" or there are more than 20, they probably have a real mouse
          $(document).mousemove(function(e){
              mouse_info.hits++;
              if (mouse_info.hits &gt; 20 || (Math.abs(e.pageX - mouse_info.x) + Math.abs(e.pageY - mouse_info.y)) &lt; 4) {
                  $(this).unbind(e);
                  shouldHover = true;
              }
              else {
                  mouse_info.x = e.pageX;
                  mouse_info.y = e.pageY;
              }
          });
      });
  
      // for the submenu to close on delay, we need to override Bootstrap's CSS in this case
      var css = '.dropdown-submenu:hover&gt;.dropdown-menu{display:none}';
      var style = document.createElement('style');
      style.type = 'text/css';
      if (style.styleSheet) {
          style.styleSheet.cssText = css;
      } else {
          style.appendChild(document.createTextNode(css));
      }
      $('head')[0].appendChild(style);
  })(jQuery, this);
  </code></pre>