changing wordpress dropdown menu to click instead of hover

[admin]

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.

Jquery:

$(".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');
        }
    } 
});

HTML

<div class="header_menu_res">
<ul id="menu-header"><li class="menu-item"><a class="primary" href="http://localhost/?page_id=7">Categories</a>
<div class="adv_categories" id="adv_categories"><ul class="maincat-list"><li class="maincat cat-item-8"><a href="http://localhost/?ad_cat=acs-consultants" title="">ACS Consultants</a>  </li>
<li class="maincat cat-item-9"><a href="http://localhost/?ad_cat=business-development" title="">Business Development</a> </li></ul>
</div></li></ul>
</div>

CSS

.importantRule { display:block !important; }

Any time i click

Categories

the page is scrolled to the top?