I have a navigation that is hidden out of the viewport via css and shown on hover of the containing li via the :hover pseudo class. Markup and css below.

```
ul li div#someid{position:absolute;left:-9999px;opacity:0;}
ul li:hover div#someid { left:0;opacity:1;z-index:9000;}

 <ul>
     <li>
     <div>The Content to Hide <a href="#runAjax">Click Me</a></div>
     </li>
 </ul>

```

Upon click of the "Click Me" I run some jQuery that will populate a part of the page based on the hash value. This all works fine. What I am trying to do is force the `<div>...</div>` that is currently being shown via the `:hover` css to hide.

I have read and tried to set the `.css('left','-9999px');` as well as `.removeClass("hover");` and of course I have tried `.hide()` but this prevents it from being visible and still shows as the mouse is hovering over the link once mouseOut occurs it is then hidden in the dom unless set to `.show()`

Any ideas on what I am doing wrong or how I can remove the hover/mouseover behavior via jQuery.

Thanks in advance gurus.