Vertical Menu To Stay Open On Hover Then Close When Another Is Hovered

I have a vertical carousel menu that on two of the items opens to reveal sub menus. When you hover off the menu they close again and return to the normal menu state. What I am look

Solution 1:

In your hover function, why don't you add a new class that has the attribute display:block. Prior to setting this, call the close function for any open sub-menu that already has the selected class.

It may look something like this:

$(function () {
     $("ul.menu-main > li").hover(function () {
        //Don't do this again if the same menu is hoveredif (!$(this).hasClass('selected')) {
            //Ensure any open sub-menu is closed.
            $("li.selected").children("ul").stop(true, true).slideUp(300);
            $(".contact-details-container p").stop(true, true).fadeIn(2000);
            $("li.selected").removeClass('selected');

            //Open sub-menu
            $(this).addClass('selected');
            $(this).children("ul").slideDown(300);
            $(".contact-details-container p").fadeOut(200);
        }
    });
});

Edit: Due to the way (I think) your menu is working, you shouldn't actually need the display:block attribute, but you will still need the class to identify the open submenus so you can apply your effects.