Home > DeveloperSection > Forums > Clear CSS menu hover state on click (page loaded via ajax)
Ashish Pandey

Total Post:128

Posted on    December-28-2012 7:58 AM


 1 Reply(s)
 2551  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: 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 in advance


Total Post:604

Posted on    December-28-2012 8:08 AM

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

Don't want to miss updates? Please click the below button!

Follow MindStick