Need JS to keep the hover link active

Question

I have a dropdown menu and i need help getting the hover link to stay active when i hover over it so it blends with the dropdown.

I have put the code on JSF

http://jsfiddle.net/JmR87/2/

Thanks

Answer 1

You can fix it by changing this:

#nav-container li a:hover span {
    display: block;
    background-image: url(http://i.stack.imgur.com/sTqNy.gif);
    background-repeat: repeat-x;
}

to this:

#nav-container li:hover span {
    display: block;
    background-image: url(http://i.stack.imgur.com/sTqNy.gif);
    background-repeat: repeat-x;
    color: #000
}

See: http://jsfiddle.net/JmR87/5/

Answer 2

Add a class to the element you are hovering over in the hover function and then remove it when you exit. The class should have the same style has the hover style:

$(function () {
  $('.dropdown, .dropdown2, .dropdown3').each(function () {
    $(this).parent().eq(0).hover(function () {
      $('.dropdown, .dropdown2, .dropdown3:eq(0)', this).show();
      $(this).addClass("hoverstyle");
    }, function () {
      $('.dropdown, .dropdown2, .dropdown3:eq(0)', this).hide();
      $(this).removeClass("hoverstyle");
    });
  });
});

Then define .hoverstyle .