fadeOut() not working. div reappears after fade-ing out

Question

I made a navbar where the subnav is showing fullscreen on hover while the other subnavs close. The fullscreen subnav always stays open until you go to a new page.

I want to build in a close button so you can also close the subnav (no auto close on hover out!) by clicking on it and that works partially because it does fade out but it immediately fades back in again.

I think the problem is that the close button is in the hover div that triggers the fade-in of the subnav. Is there a way to overrule that with javascript?

$('li.menu-item-has-children').hover(function () {
  $('ul.dropdown-menu-main', this).fadeIn('slow');
  $(this).parent().children().not(this).find('ul.dropdown-menu-main').fadeOut();
});

$('.close').click(function () {
  $('ul.dropdown-menu-main').fadeOut('fast');
});

* {
  padding:0;
  margin:0;
}

ul, ul li {
  list-style:none;
  padding:0;
  margin:0;
}

li {
  display: inline-block;
  position: relative;
  margin-right:20px !important;
}

ul.dropdown-menu-main {
  display:none;
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100vh;
  background:black;
  z-index:-1;
  padding:30px 0;
}

ul.dropdown-menu-main li {
  color:white;
}

.close {
  position:absolute;
  top:70px;
  left:0px;
  z-index:99;
  color:#aaaaaa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="menu-item-has-children">
  
    <a href="#">Main 1</a>
    <ul class="dropdown-menu-main">
      
      <div class="close">
      close
      </div>
      
      <li>Sub 1</li>
    </ul>
  </li>
  
  <li class="menu-item-has-children">
    
    <a href="#">Main 2</a>
    <ul class="dropdown-menu-main">
      
      <div class="close">
      close
      </div>
      
      <li>Sub 2</li>
    </ul>
    
  </li>
</ul>

Answer 1

Don't target the whole <li>, just target the <a> inside.

However, keep in mind that a drawer or a menu must always be easier to close than to open. Having a full-page overlay that opens easily on hover, but requires a click to go away is irritating and a no-go from a UX standpoint.

$('li.menu-item-has-children a').hover(function() {
  const $this = $(this);
  $this.next(".dropdown-menu-main").fadeIn('slow')

  $this.parent().siblings()
    .find('ul.dropdown-menu-main')
    .fadeOut();
});

$('.close').click(function(e) {
  $('ul.dropdown-menu-main').fadeOut('slow');
});

* {
  padding: 0;
  margin: 0;
}

ul,
ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  position: relative;
  margin-right: 20px !important;
}

ul.dropdown-menu-main {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background: black;
  z-index: -1;
  padding: 30px 0;
}

ul.dropdown-menu-main li {
  color: white;
}

.close {
  position: absolute;
  top: 70px;
  left: 0px;
  z-index: 99;
  color: #aaaaaa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="menu-item-has-children">

    <a href="#">Main 1</a>

    <ul class="dropdown-menu-main">

      <div class="close">
        close
      </div>

      <li>Sub 1</li>
    </ul>
  </li>

  <li class="menu-item-has-children">

    <a href="#">Main 2</a>
    <ul class="dropdown-menu-main">

      <div class="close">
        close
      </div>

      <li>Sub 2</li>
    </ul>

  </li>
</ul>

Answer 2

The reason why this is not working is becuase the "close" is causing the hover event to fire on the parent.

if you remove it from the li it will start to work

see this fiddle https://jsfiddle.net/oe6yL0gt/