Is it possible to modify the WordPress menu dropdown behavior from hover to onclick? I want the menu to appear when an item is clicked, but WordPress currently requires hovering.
Below is what I've tried so far, but it has not been successful.
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; }
Whenever I click on 'Categories', the page scrolls to the top. How can this be fixed?