title: Expand vertical drop down menu on hover instead of click
body: <p>I have an expandable vertical drop down menu that currently expands when first level items are clicked, however I want it to expand when the menu item is hovered over instead. The original script is:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
    $('#nav &gt; li &gt; a').click(function(){
    if ($(this).attr('class') != 'active'){
    $('#nav li ul').slideUp();
    $(this).next().slideToggle();
    $('#nav li a').removeClass('active');
    $(this).addClass('active');
      }
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I changed <code>.click(function</code> to <code>.hover(function</code> and this works, however I don't know if it is the best way to do it. Can anyone advise if there is a better way to acheive this? You can see a working example of the .click version of the menu on the left hand side of the page <a href="http://www.davidkneale.com/wcusa/expeditions.html" rel="nofollow">by clicking here.</a> Thanks!</p>