Dropdown menu open on hover instead of click on shopify

I’m trying to edit a shopify theme and the last part I’m stuck on is getting these navigation menus to open on hovering instead of clicking. The css I have for the menus is:

.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;
}

The HTML and Liquid for the header is:

      {% if section.settings.align_logo == 'left' %}
        <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
          {% include 'site-nav' %}
        </nav>
      {% endif %}

And the relevant menu Javascript:

/* ================ MODULES ================ */
window.theme = window.theme || {};

theme.Header = (function() {
  var selectors = {
    body: 'body',
    navigation: '#AccessibleNav',
    siteNavHasDropdown: '.site-nav--has-dropdown',
    siteNavChildLinks: '.site-nav__child-link',
    siteNavActiveDropdown: '.site-nav--active-dropdown',
    siteNavLinkMain: '.site-nav__link--main',
    siteNavChildLink: '.site-nav__link--last'
  };

  var config = {
    activeClass: 'site-nav--active-dropdown',
    childLinkClass: 'site-nav__child-link'
  };

  var cache = {};

  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();
    });
  }

  function cacheSelectors() {
    cache = {
      $nav: $(selectors.navigation),
      $topLevel: $(selectors.siteNavLinkMain),
      $parents: $(selectors.navigation).find(selectors.siteNavHasDropdown),
      $subMenuLinks: $(selectors.siteNavChildLinks),
      $activeDropdown: $(selectors.siteNavActiveDropdown)
    };
  }

  function showDropdown($el) {
    $el.addClass(config.activeClass);

    // close open dropdowns
    if (cache.$activeDropdown.length) {
      hideDropdown(cache.$activeDropdown);
    }

    cache.$activeDropdown = $el;

    // set expanded on open dropdown
    $el.find(selectors.siteNavLinkMain).attr('aria-expanded', 'true');

    setTimeout(function() {
      $(window).on('keyup.siteNav', function(evt) {
        if (evt.keyCode === 27) {
          hideDropdown($el);
        }
      });

      $(selectors.body).on('click.siteNav', function() {
        hideDropdown($el);
      });
    }, 250);
  }

  function hideDropdown($el) {
    // remove aria on open dropdown
    $el.find(selectors.siteNavLinkMain).attr('aria-expanded', 'false');
    $el.removeClass(config.activeClass);

    // reset active dropdown
    cache.$activeDropdown = $(selectors.siteNavActiveDropdown);

    $(selectors.body).off('click.siteNav');
    $(window).off('keyup.siteNav');
  }

  function unload() {
    $(window).off('.siteNav');
    cache.$parents.off('.siteNav');
    cache.$subMenuLinks.off('.siteNav');
    cache.$topLevel.off('.siteNav');
    $(selectors.siteNavChildLink).off('.siteNav');
    $(selectors.body).off('.siteNav');
  }

  return {
    init: init,
    unload: unload
  };
})();

Any help would be greatly appreciated. I feel so silly asking a simple question like this. I just can’t figure out where to put :hover in the code. It seems pretty strait forward but I can’t get it. You can see the site here: AlexandIvy.myShopify.com and the password to view it is staysk. I’m just talking about the top navigation menus.

This is the code from the console:

<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">
          <ul>

              <li>
                <a href="/collections/sheet-sets" class="site-nav__link site-nav__child-link">Sheet Sets</a>
              </li>

          </ul>
        </div>
      </li>