I am using the code from http://www.javascriptkit.com/script/script2/jkmegamenu.shtml

I have the drop working correctly, my only problem is getting the anchor link to stay in the hover state once the mouse leaves the anchor link and is hovering over the actual drop down. I have looked at the css and javascript extensively and can't find anything that would facilitate this. Any help would be greatly appreciated. Thanks!

P.S. Mouse over "Facilities" in the example link to see the problem.

1 answer

Mottie 1134
0
points
This was chosen as the best answer

Hiya!

I don't think jkmegamenu is set up to keep the hover state over the megaanchor, if it was, then the menamenu div would be contained within the link. I tried modifying it this way, but it would need the CSS to be adjusted so I figured out an easier way would be to just add a class to the link when the menu was being hovered over.

Modify the menu.css line to this:

#facilities_btn a.hover, #facilities_btn a:hover{
    background-position: 0px -275px;
    display: block;
    float: right;
}

and add this code below the jkmenamenu.definemenu script

<script type="text/javascript">
jQuery(function($){
 $('#megamenu1').hover(function(){
  $('#megaanchor').addClass('hover');
 }, function(){
  $('#megaanchor').removeClass('hover');
 })
})
</script>
Answered about 9 years ago by Mottie
  • Thank you for your response. I tried adding what you said but for some reason it didn't work. I made the changes to the example link, I don't know if I added the changes in the wrong place or something. Thank you again for the help, I've been driving myself nuts with this for a couple days. Tyler Cooper about 9 years ago
  • Nevermind, I made an error. It works great!! Thank you SOO much! Tyler Cooper about 9 years ago