Sidebar submenu elements not showing/hiding as they should

css, javascript, jquery

Solution

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");
});

Problem

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.

Original source