Sidebar submenu elements not showing/hiding as they should

Question

I am trying to create a simple sidebar for my website using jquery and I am having some trouble with the hover functionality of it. When a user hovers over a category, a submenu is suppose to appear. I would like the submenu to close if a category above or below is hovered. I created a jsFiddle to help show my problem and how submenu doesn't close down like it should. I have been trying to figure this out for hours now, I would greatly appreciate any help with this.

http://jsfiddle.net/BGcDc/7/

thank you.

Answer 1

You forgot to hide your subment in the mouseleave function. Just add $(this).find(".submenu").hide(); to your existing handler:

$(".category").mouseleave(function() {
    $(this).find(".submenu").hide();
    $(this).css("background-color", "#eee");
    $(this).css("border", "1px solid grey");
    $(this).css("border-bottom", "none");
    $(this).css("width", "180px");
    $(".category:last").css("border-bottom", "1px solid grey");
});

Answer 2

http://jsfiddle.net/ahren/BGcDc/8/

Just add a $(".submenu").hide(); at the start of the hover.