title: Bootstrap dropdown menu to open on hover
body: <p>My website uses Bootstrap. The menu of the site is using dropdown menu's. And with a change from another thread, I made the dropdown menu's to auto open on mouseOver.</p>
  
  <pre><code>$(".dropdown").hover(
      function(){ $(this).addClass('open') },
      function(){ $(this).removeClass('open') }
  );
  </code></pre>
  
  <p>However I not only use the drowdown menu's in my site navigation, but also on another location, as a dropdown on the user's name. Having the menu open automatically on mouseOver is unwanted here.</p>
  
  <p>Code for the user menu:</p>
  
  <pre><code>&lt;span class='dropdown mousehand nobr'&gt;
      &lt;span data-toggle='dropdown'&gt;$username &lt;span class='caret'&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'&gt;
          &lt;li&gt;&lt;a href='http://steamcommunity.com/profiles/$steamid' target='_blank'&gt;Steam profile&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='http://www.steamgifts.com/user/id/$steamid' target='_blank'&gt;SteamGifts profile&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Now my question is, who can help me to prevent the hover effect from happening on this element?</p>
  
  <p>I tried giving the attribute 'data-toggle' another name, like dropdown2. However this breaks the menu completely. It won't open at all any more even if the user clicks on it.
  Is there like a class I can add to the JS code so it will only do the hover function on that class?</p>
  
  <p>So to summarize what I want, is the hover effect that auto opens the menu to stay working on the menu's in the navigation bar, but not anywhere else.</p>