Menu hover doesn't close properly

Question

I have a menu with a dropdown that has another dropdown within it. If I mouse over the first dropdown it expands. It is accomplished via css. But when I tried the css for the submenu, it didn't work. So I added javascript to control opening the submenu on hover. That works but the submenu doesn't close until I move the mouse off of the first dropdown. I want it to close once the mouse is off of the submenu item.

To better understand this, please look at my jsfiddle. Open the menu and mouse over the Shop item and it will expand. Then mouseover the More Options item and it will expand. If you move the mouse up to Sub 2, the More Options should close but doesn't. I know I have the javascript looking at container-sub-menu1 to close it and that is working as it is coded. But when I try using sub-menu1 it doesn't work. Would someone please show how to close the submenu when the mouse isn't over it?

$("#sub-menu1").on("mouseenter", function() {
  // make sure it is not shown:
  if (!$(this).parent().hasClass("show")) {
    $(this).click();
  }
});
$("#container-sub-menu1").on("mouseleave", function() {
  // make sure it is shown:
  if ($(this).hasClass("show")) {
    $(this).children('.dropdown-toggle').first().click();
  }
});

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown:hover>.ul.li.dropdown-submenu {
  display: block;
}

.nav-subul {
  margin-left: 100px;
}

.dropdown-item {
  padding-left: 10px;
}

.dropdown-item::first-line {
  padding-top: 0px;
}

.dropdown-submenu {
  position: relative;
  padding-bottom: -10px;
}

.dropdown-submenu>.dropdown-menu {
  position: absolute;
  top: -20px;
  left: 54px;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

<div id="mainmenu-container" class="col-sm-<?php echo $content_width; ?> mainmenu-container">
  <nav class="navbar navbar-expand-lg navbar-light bg-custom">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Shop
                  </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="container-sub-menu1">
            <a class="dropdown-item" href="#">Sub 1</a>
            <a class="dropdown-item" href="#">Sub 2</a>

            <a class="dropdown-item dropdown-toggle" id="sub-menu1" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      More Options
                    </a>
            <div class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink">
              <ul class="navbar-nav nav-subul">
                <li class="nav-item dropdown">
                  <div class="dropdown dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Next 1</a>
                    <a class="dropdown-item" href="#">Next 2</a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>

Answer 1

Jquery to close the submenu when the mouse isn't hovering on it:

$("#sub-menu1").on("mouseleave", function () {
  // make sure it is not shown:
  if (!$(this).parent().hasClass("hide")) {
    $(this).click();
  }
});

Demo:

$("#sub-menu1").on("mouseenter", function() {
  // make sure it is not shown:
  if (!$(this).parent().hasClass("show")) {
    $(this).click();
  }
});

$("#sub-menu1").on("mouseleave", function() {
  // make sure it is not shown:
  if (!$(this).parent().hasClass("hide")) {
    $(this).click();
  }
});
$("#container-sub-menu1").on("mouseleave", function() {
  // make sure it is shown:
  if ($(this).hasClass("show")) {
    $(this).children('.dropdown-toggle').first().click();
  }
});

.dropdown-menu{
   top:75% !important;
}

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown:hover>.ul.li.dropdown-submenu {
  display: block;
}

.nav-subul {
  margin-left: 100px;
}

.dropdown-item {
  padding-left: 10px;
}

.dropdown-item::first-line {
  padding-top: 0px;
}

.dropdown-submenu {
  position: relative;
  padding-bottom: -10px;
}

.dropdown-submenu>.dropdown-menu {
  position: absolute;
  top: -20px;
  left: 54px;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

<div id="mainmenu-container" class="col-sm-<?php echo $content_width; ?> mainmenu-container">
  <nav class="navbar navbar-expand-lg navbar-light bg-custom">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Shop
                  </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="container-sub-menu1">
            <a class="dropdown-item" href="#">Sub 1</a>
            <a class="dropdown-item" href="#">Sub 2</a>

            <a class="dropdown-item dropdown-toggle" id="sub-menu1" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      More Options
                    </a>
            <div class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink">
              <ul class="navbar-nav nav-subul">
                <li class="nav-item dropdown">
                  <div class="dropdown dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Next 1</a>
                    <a class="dropdown-item" href="#">Next 2</a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>

Alternate solution using css: No need of jquery to display dropdown on hover u can simple use css to display the dropdown.

.dropdown-item.dropdown-toggle:hover ~ .dropdown-submenu .navbar-nav .dropdown {
  display: block;

}

.dropdown-menu{
   top:75% !important;
}

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown:hover>.ul.li.dropdown-submenu {
  display: block;
}

.nav-subul {
  margin-left: 100px;
}

.dropdown-item {
  padding-left: 10px;
}

.dropdown-item::first-line {
  padding-top: 0px;
}

.dropdown-submenu {
  position: relative;
  padding-bottom: -10px;
}

.dropdown-submenu>.dropdown-menu {
  position: absolute;
  top: -20px;
  left: 54px;
}
.dropdown-item.dropdown-toggle:hover ~ .dropdown-submenu .navbar-nav .dropdown {
  display: block;
  
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

        <div id="mainmenu-container" class="col-sm-<?php echo $content_width; ?> mainmenu-container">
          <nav class="navbar navbar-expand-lg navbar-light bg-custom">

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                </li>

                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Shop
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="container-sub-menu1">
                    <a class="dropdown-item" href="#">Sub 1</a>
                    <a class="dropdown-item" href="#">Sub 2</a>

                    <a class="dropdown-item dropdown-toggle" id="sub-menu1" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      More Options
                    </a>
                    <div class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink">
                      <ul class="navbar-nav nav-subul">
                        <li class="nav-item dropdown">
       <div class="dropdown dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Next 1</a>
                            <a class="dropdown-item" href="#">Next 2</a>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </nav>
        </div>