title: How to change WP dropdown menu from hover to on click
body: <p>I have a WP theme that has a menu on the side (vertical) and hidden. When you move the mouse over, the menu will slide out to show the menu items. Once you move the mouse to the menu and hover, the submenu will slide down.</p>
  
  <p>It works beautifully until I have too many subpages. So I want to change the state of the submenu from hover to on click.</p>
  
  <p>My current script is such:</p>
  
  <pre><code>$j.fn.setNav = function(){
  $j('#main_menu li ul').css({display: 'none'});
  
  $j('#main_menu li').each(function()
  {   
      var $jsublist = $j(this).find('ul:first');
  
      $j(this).hover(function()
      {   
          $jsublist.css({opacity: 1});
  
          $jsublist.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeIn(200, function()
          {
              $j(this).css({overflow:'visible', height:'auto', display: 'block'});
          }); 
      },
      function()
      {   
          $jsublist.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeOut(200, function()
          {
              $j(this).css({overflow:'hidden', display:'none'});
          }); 
      }); 
  
  });
  
  $j('#main_menu li').each(function()
  {
  
      $j(this).hover(function()
      {   
          $j(this).find('a:first').addClass('hover');
      },
      function()
      {   
          $j(this).find('a:first').removeClass('hover');
      }); 
  
  });
  
  $j('#menu_wrapper .nav ul li ul').css({display: 'none'});
  
  $j('#menu_wrapper .nav ul li').each(function()
  {   
  
      var $jsublist = $j(this).find('ul:first');
  
      $j(this).hover(function()
      {   
          $jsublist.css({opacity: 1});
  
          $jsublist.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeIn(200, function()
          {
              $j(this).css({overflow:'visible', height:'auto', display: 'block'});
          }); 
      },
      function()
      {   
          $jsublist.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeOut(200, function()
          {
              $j(this).css({overflow:'hidden', display:'none'});
          }); 
      }); 
  
  });
  
  $j('#menu_wrapper .nav ul li').each(function()
  {
  
      $j(this).hover(function()
      {   
          $j(this).find('a:first').addClass('hover');
      },
      function()
      {   
          $j(this).find('a:first').removeClass('hover');
      }); 
  
  });
  }
  </code></pre>
  
  <p>And then:</p>
  
  <pre><code>// Create the dropdown base
  $j("&lt;select /&gt;").appendTo("#menu_border_wrapper");
  
  // Create default option "Go to..."
  $j("&lt;option /&gt;", {
     "selected": "selected",
     "value"   : "",
     "text"    : "- Main Menu -"
  }).appendTo("#menu_border_wrapper select");
  
  // Populate dropdown with menu items
  $j(".nav li").each(function() {
   var current_item = $j(this).hasClass('current-menu-item'); 
   var el = $j(this).children('a');
   var menu_text = el.text();
  
   if($j(this).parent('ul.sub-menu').length &gt; 0)
   {
      menu_text = "- "+menu_text;
   }
  
   if($j(this).parent('ul.sub-menu').parent('li').parent('ul.sub-menu').length &gt; 0)
   {
      menu_text = el.text();
      menu_text = "- - "+menu_text;
   }
  
   if(current_item)
   {
      $j("&lt;option /&gt;", {
           "selected": "selected",
           "value"   : el.attr("href"),
           "text"    : menu_text
       }).appendTo("#menu_border_wrapper select");
   }
   else
   {
      $j("&lt;option /&gt;", {
          "value"   : el.attr("href"),
          "text"    : menu_text
      }).appendTo("#menu_border_wrapper select");
   }
  });
  
  $j("#menu_border_wrapper select").change(function() {
      window.location = $j(this).find("option:selected").val();
  });
  </code></pre>
  
  <p>If you would like to see the site, it's at bsbharco.com</p>
  
  <p>Thank you in advance.</p>