Hover Menu Not Disappearing on Mouseout – Shopify

So I’m trying to edit Shopify’s code to make the menus in my store open on hover instead of having to be clicked. With help, the menus now open on hover but they don’t close on mouseout. I guess my options would be to change the CSS, the JQuery script, or the Javascript that controls the menus. I’ve tried changing everything that says ‘click’ in the Javascript to ‘mouseover’ and that kinda worked except the menus disappear when you try to click on a link in the drop down. This is the code I have now, I changed the ‘mouseover’s back to ‘clicks’.

I’ve been messing with the CSS and Javascript for 7 days now trying to get this to work. I changed everything back to the way Shopify had it so at least it works, you can see the site here: AlexAndIvy.MyShopify.com password is staysk.

This is the HTML from the console:

<div data-section-id="header" data-section-type="header-section">
  <header class="site-header border-bottom logo--left" role="banner">
    <div class="grid grid--no-gutters grid--table">
        <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
          <ul class="site-nav list--inline " id="SiteNav">


      <li class="site-nav--has-dropdown">
        <a href="/collections/bedding" class="site-nav__link site-nav__link--main" aria-has-popup="true" aria-expanded="false" aria-controls="SiteNavLabel-bedding">
          Bedding
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewBox="0 0 498.98 284.49"><defs><style>.cls-1{fill:#231f20}</style></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
          <span class="visually-hidden">expand</span>
        </a>

        <div class="site-nav__dropdown" id="SiteNavLabel-bedding" style="display: block;">
          <ul>
              <li class="site-nav--active">
                <a href="/collections/sheet-sets" class="site-nav__link site-nav__child-link">Sheet Sets</a>
              </li>
          </ul>
        </div>
      </li>
</ul>
        </nav> 
        </div>
      </div>
    </div>

Specifically this part after the header is what’s making them open on hover:

  <script>
     $('.site-nav--has-dropdown').hover(function(){
    $(this).children('.site-nav__dropdown').css("display", "block")
  }); 
  $('.site-nav__dropdown').mouseout(function(){
    $(this).css('display', 'none')
  });
  </script>

And then the CSS:

/*================ #Site Nav and Dropdowns ================*/

.site-nav {
  position: relative;
  padding: 0;
  text-align: center;
  margin: 25px 0;

  a {
    padding: 3px 10px;
  }

  li {
    display: inline-block;
  }
}

.site-nav--centered {
  padding-bottom: $gutter-site-mobile;
}

/*================ Site Nav Links ================*/
.site-nav__link {
  display: block;
  white-space: nowrap;

  .site-nav--centered & {
    padding-top: 0;
  }

  .icon-chevron-down {
    width: 8px;
    height: 8px;
    margin-left: 2px;

    .site-nav--active-dropdown & {
      transform: rotateZ(-180deg);
    }
  }

  &.site-nav--active-dropdown {
    border: 1px solid $color-border;
    border-bottom: 1px solid transparent;
    z-index: 2;
  }
}

/*================ Dropdowns ================*/
.site-nav--has-dropdown {
  position: relative;
}

.site-nav--has-centered-dropdown {
  position: static;
}

.site-nav__dropdown {
  display: none;
  position: absolute;
  left: 0;
  padding: $dropdown-padding;
  margin: 0;
  z-index: $z-index-dropdown;
  text-align: left;
  border: 1px solid $color-border;
  background: $color-bg;
  left: -1px;
  top: 41px;

  .site-nav__link {
    padding: 4px 30px 4px 0;
  }

  .site-nav--active-dropdown & {
    display: block;
  }

  li {
    display: block;
  }
}

// Centered dropdown
.site-nav__dropdown--centered {
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  text-align: center;
}

/*================ Child list ================*/
.site-nav__childlist {
  display: inline-block;
  border: 1px solid $color-border;
  background: $color-bg;
  padding: $dropdown-padding;
  text-align: left;
}

Javascript:

  function init() {
    cacheSelectors();
    cache.$parents.on('click.siteNav', function(evt) {
      var $el = $(this);

      if (!$el.hasClass(config.activeClass)) {
        // force stop the click from happening
        evt.preventDefault();
        evt.stopImmediatePropagation();
      }

      showDropdown($el);
    });

    // check when we're leaving a dropdown and close the active dropdown
    $(selectors.siteNavChildLink).on('focusout.siteNav', function() {
      setTimeout(function() {
        if ($(document.activeElement).hasClass(config.childLinkClass) || !cache.$activeDropdown.length) {
          return;
        }

        hideDropdown(cache.$activeDropdown);
      });
    });

    // close dropdowns when on top level nav
    cache.$topLevel.on('focus.siteNav', function() {
      if (cache.$activeDropdown.length) {
        hideDropdown(cache.$activeDropdown);
      }
    });

    cache.$subMenuLinks.on('click.siteNav', function(evt) {
      // Prevent click on body from firing instead of link
      evt.stopImmediatePropagation();
    });
  }