JQuery Click Stops Css Hover Events

I have a classical css drop-down menu with css hover selector switching to 'display:block;' In order to work with touch devices, I have added this script: $(document).ready(functio

Solution 1:

You are missing parenthesis on .hide. It should be:

$("div.menuHead").not($(this)).siblings("div.menu").hide();

Solution 2:

EDIT (based on fiddle produced by OP):

Working demo

Javascript:

$(document).ready(function () {
    $(".menuHead").on('click mouseenter mouseleave', '> li', function (evt) {
        var e = evt || window.event;
        switch (e.type || e.which) {
            case "click":
                if (!($(this).find('.menu').hasClass('stayOpen'))) {
                    $('.stayOpen').removeClass('stayOpen').hide();
                    $(this).find('.menu').addClass('stayOpen');
                } else {
                    $(this).find('.menu').removeClass('stayOpen').hide();
                }
                break;
            case "mouseenter":
                $(this).find('.menu').not('.stayOpen').addClass('open').show();
                break;
            case "mouseleave":
                $(this).find('.menu').not('.stayOpen').removeClass('open').hide();
                break;
            default:
                break;
        }
    });
});

HTML:

<ul class="menuHead">
    <li class="title">Menu #1
        <ul class="menu">
            <li>Menu #1 - Link #1</li>
            <li>Menu #1 - Link #2</li>
        </ul>
    </li>
    <li class="title">Menu #2
        <ul class="menu">
            <li>Menu #2 - Link #1</li>
            <li>Menu #2 - Link #2</li>
        </ul>
    </li>
</ul>

CSS:

.title {
    width: 150px;
    display: inline-block;
    position: relative;
}
.menu {
    display: none;
}
.open,
.stayOpen {
    position: absolute;
    top: 100%;
    display: block;
    width: 300px;
}

Solution 3:

You can fix this with pure CSS by adding !important to :hover CSS:

div.vectorMenu:hover div.menu {
    display: block !important;
}

JS Fiddle Demo