Open child div on hover parent and close other child divs ( w/ 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('fast');
});

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:50px;
}

<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</div>
    <ul class="dropdown-menu-main">
      <li>Sub 1</li>
    </ul>
  </li>
  
  <li class="menu-item-has-children">
    
    <a href="#">Main 2</div>
    <ul class="dropdown-menu-main">
      <li>Sub 2</li>
    </ul>
    
  </li>
</ul>