Clear CSS menu hover state on click (page loaded via ajax)

Total Post:128

 3263  View(s)
Rate this:
Hello every one,

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: 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 in advance

  1. Post:604

    Re: Clear CSS menu hover state on click (page loaded via ajax)

    Hi Ashish Pandey

    You can try with this script, I hope it resolve your problem

       $('#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

      Modified On Mar-29-2018 06:02:22 AM