Question

I have a CSS drop down menu on a website. Along the top there are a list of parent categories, when you hover over one, a drop down menu appears where you can then click on one of the child categories.

When you click on the child category, an ajax page load is triggered and the contents of the page are replaced. Works good.

But the problem is, because the page is not reloaded, the drop down menu is still there. You have to move the mouse off it to get it to go away. This is annoying. We want the menu to dissapear when you click on a child category. On a touch device this behaviour is even more annoying.

Rather than posting the code here, I will put a link to the website: http://tinyurl.com/blvtlwz
The menu in question is the one at the top – ‘Competition Horses’ ‘Leisure Horses’ etc.

I would be interested in any ideas of how to clear the hover state when a click is detected, or alternatively a better way of handling the menu? I have fiddled around with jquery removeClass(), but I haven’t had much luck.

Thanks

Answer 1

You can try with this script:

 $(function(){
   $('#nav li').hover(function() {
     $('ul',this).show(); // this will show the hidden ul
   });
  $('#nav li ul li').click(function() {
     $(this).parent().hide().end(); // this will hide the ul
  });
});