enter image description here

I’m building a navigation bar, and I have a problem in concern with the hover part.

So I’m changing my navigation bar into a clickable type, I changed how the menu opened, instead of having the mouse over it and it dropped down, now you need to click to make a drop down appear, but immediately after the mouse touches one of the different sub menus it closes, the one that is already open.

this is the javascript of the navigation bar, where all the part of the dropdown and hover part is, I cannot figure out the part that is making the problem.

$(document).ready(function() {
$("#menu-button").click(function() {
    if ($(this).hasClass('open')) {
        $("body > div.body-content, body > div.home-page, body > div.nav").removeClass('move-left');
    } else {
        $("body > div.body-content, body > div.home-page, body > div.nav ").addClass('move-left');
var animating = false;
var subMenuActive = null;

$("#site-menu > div").click(function() {

    var subMenu = $(this).find(".sub-menu");
    var height = 0;
    if (!subMenuActive || (subMenuActive.find('p').text() !== $(this).find('p').text())) {
                    if (subMenuActive) subMenuActive.find(".sub-menu").css('height', '0');
        subMenu.children().each(function(i, val) {
            height += $(val).innerHeight();
                    subMenu.css("height", height + "px");
                    subMenuActive = $(this);
            else if (subMenuActive)
                subMenuActive.find(".sub-menu").css('height', '0');
                subMenuActive = null;

this image that I made due to company policy will give you guys a inside of what is happening.

Read more here: Nav bar remove hover


If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Wordpress related questions and answers: