title: changing wordpress dropdown menu to click instead of hover
body: <p>I'm attempting to change the wordpress menu to onclick from hover with drop down menus.  I want to see the menu when i item is clicked but wordpress does on hover.  Here is the code of what i have attempted so far but it doesn't work.</p>
  
  <p>Jquery:</p>
  
  <pre><code>$(".header_menu_res ul li").live("click",function() {
      if($(this).find(".adv_categories").length==1) {
          if($(this).find(".adv_categories").is(":visible")) {
              $(this).find(".adv_categories").removeClass('importantRule');
              $(this).parent("ul").find(".sub-menu").removeClass('importantRule');
          } else {
              $(this).find(".adv_categories").addClass('importantRule');
          }
      } 
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="header_menu_res"&gt;
  &lt;ul id="menu-header"&gt;&lt;li class="menu-item"&gt;&lt;a class="primary" href="http://localhost/?page_id=7"&gt;Categories&lt;/a&gt;
  &lt;div class="adv_categories" id="adv_categories"&gt;&lt;ul class="maincat-list"&gt;&lt;li class="maincat cat-item-8"&gt;&lt;a href="http://localhost/?ad_cat=acs-consultants" title=""&gt;ACS Consultants&lt;/a&gt;  &lt;/li&gt;
  &lt;li class="maincat cat-item-9"&gt;&lt;a href="http://localhost/?ad_cat=business-development" title=""&gt;Business Development&lt;/a&gt; &lt;/li&gt;&lt;/ul&gt;
  &lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.importantRule { display:block !important; }
  </code></pre>
  
  <p>Any time i click <code>Categories</code> the page is scrolled to the top?</p>