I have a sub menu div which has a cart `span` in it. When the user hovers over it, it displays my hidden cart `DIV`. The user can then move the mouse to the `DIV` to remove an item.

If the user displays and moves the mouse into the hidden `DIV` then moves out of this, the `DIV` is re-hidden

The issue i'm having is that if the user displays the `DIV` but instead of moving into hidden `DIV`, goes back to the sub/main menu the `DIV` is not re-hiding and i have tried everything i can think.

Please check my [fiddle](https://jsfiddle.net/murday1983/2j8L3h47/20/)

If you dont go to the div first it wont hide it

```js
$('#subMenuCartBox').mouseover(function () {
  $('#cartBox').show();
  $('#cartBox').mouseleave(function () {
    $('#cartBox').hide();
  });
}).mouseleave(function () {
  setTimeout(function () {
    if (!$('#cartBox').length) {
      $('#cartBox').hide();
    }
  });
})
```

```css
.mainMenu {
  width: 100%;
  height: 75px;
  background-color: lightblue;
}

.subMenu {
  width: 100%;
  height: 45px;
  background-color: gray;
  text-align: right;
  padding: 10px;
}

.subMenuOptionSpan {
    display: inline-flex;
}

.subMenuCartBox {
    background-color: deepskyblue;
    padding: 5px;
    width: 100%;
    cursor: pointer;
}

.cartBox {
    float: right;
    padding: 15px;
    background-color: lightgray;
    display: none;
    left: auto;
}
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainMenu">
  Main menu options
</div>

<div class="subMenu">
  <div class="row justify-content-end align-items-center">
    <span class="subMenuOptionSpan col-12 col-sm-auto">
      <i class="fas fa-user fa-lg"></i>
      <div id="username">Test of long username</div>
    </span>
    <span id="subMenuCartBox" class="subMenuOptionSpan col-12 col-sm-auto">
      <i class="fas fa-shopping-cart fa-lg"></i>
      <div id="cartAmountBox" class="subMenuCartBox">
        <span id="cartAmountText" class="subMenuCartAmount">0 item(s) - £0.00</span>
      </div>
    </span>
  </div>
</div>

<div id="cartBox" class="cartBox">
  <b id="emptyCart">There are currently no items in your cart.</b>
</div>
```

I need the hidden `DIV` to re-hide if the user goes anywhere on the page without having to go inside it and then out of it.