---
title: "Clear CSS menu hover state on click (page loaded via ajax)"  
description: "Clear CSS menu hover state on click (page loaded via ajax)"  
author: "Anonymous User"  
published: 2012-12-28  
updated: 2012-12-28  
canonical: https://www.mindstick.com/forum/515/clear-css-menu-hover-state-on-click-page-loaded-via-ajax  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 2 minutes  

---

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

Hello every one,\

I have a CSS [drop down](https://www.mindstick.com/forum/263/drop-down-list-problem) menu on a [website](https://www.mindstick.com/articles/13110/why-copywriting-is-crucial-for-new-website-build). Along the top there are a list of parent [categories](https://answers.mindstick.com/qa/47601/what-are-the-categories-of-stations-for-provision-of-passenger-amenities-explain-them), 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](https://www.mindstick.com/articles/12909/how-to-open-first-time-popup-on-page-load-in-website) is triggered and the contents of the page are replaced. Works good.

But the [problem](https://yourviews.mindstick.com/view/81399/tackling-the-problem-of-unemployment-during-corona-pandemic) 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](https://www.mindstick.com/forum/34719/cross-page-posting) the code here, I will put a link to the website: http://tinyurl.com/blvtlwz The menu in [question](https://www.mindstick.com/blog/23175/how-to-solve-neet-question-paper-in-less-time) is the one at the top - '[Competition](https://www.mindstick.com/articles/23460/5-ways-you-can-use-competition-to-your-benefit) 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](https://www.mindstick.com/forum/34585/file-handling) the menu? I have fiddled around with jquery removeClass(), but I haven't had much luck.

Thanks in [advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)

\

## Replies

### Reply by AVADHESH PATEL

Hi Ashish Pandey\
\

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

```
$(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
  });
});
```


---

Original Source: https://www.mindstick.com/forum/515/clear-css-menu-hover-state-on-click-page-loaded-via-ajax

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.