How do I remove WordPress Custom Menus hover event and replace it with jQuery onclick?

Question

I am using the WordPress (Appearance > Menus) feature to create a custom navigation menu. I created a menu item that has a dropdown and would like to activate the dropdown menu with a click rather than mouse hover. How would I go about doing this? I'm familiar wit jQuery, I just don't know how to remove the current hover state.

Answer 1

The hover is part of the theme you are using. You need to find whats causing the dropdown on hover and remove it. It'll either be javascript controlled or css. You can test if its javascript by disabling javascript, although is may have a css fallback. If its CSS use firebug to find the selectors for the nav menu. In your css file there will be something that looks like

ul li:hover ul{} 

or if its a twentyten based them it'll be

#access ul li:hover > ul{}

You can comment or delete that line. Then use jquery add the css that :hover psuedo selecter was adding.