javascript - sub menu hover i need some answers

Question

I have a code for menu. i want add submenu for category1 how can I do this ? I have a code for menu. i want add submenu for category1 how can I do this ? I have a code for menu. i want add submenu for category1 how can I do this ? I have a code for menu. i want add submenu for category1 how can I do this ?

const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";

$(window).on("load resize", function() {
      if (this.matchMedia("(min-width: 768px)").matches) {
        $dropdown.hover(
          function() {
            const $this = $(this);
            $this.addClass(showClass);
            $this.find($dropdownToggle).attr("aria-expanded", "true");
            $this.find($dropdownMenu).addClass(showClass);
          },
          function() {
            const $this = $(this);
            $this.removeClass(showClass);
            $this.find($dropdownToggle).attr("aria-expanded", "false");
            $this.find($dropdownMenu).removeClass(showClass);
          }
        );
      } else {
        $dropdown.off("mouseenter mouseleave");
      }

.nav-item {
  color: black;
}

.dropdown-item {
  font-size: 13px;
  text-align: center;
}

.navbar1 .nav-item {
  margin-right: 45px;
  padding-bottom: 12px 5px;
  color: black;
}

.dropdown-toggle::after {
  transition: transform 0.15s linear;
  color: black;
}

.show.dropdown .dropdown-toggle::after {
  transform: translateY(3px);
}

.dropdown-toggle {
  color: black;
}

.dropdown-menu {
  margin-top: 0px;
}

<nav class="navbar1 navbar-expand-md    ">
  <div class="container-fluid">
  
  </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mt">
    
    <li class="nav-item dropdown ">
      <a class="nav-link dropdown-toggle"  id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Knight Online
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
        <a class="dropdown-item" href="kategorr">kategorr1 </a>
          <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="/kategorr1/kategorr">kategorr2</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="/kategorr2/kategorr">kategorr2</a>
      </div>
    </li>

question from:https://stackoverflow.com/questions/65833299/sub-menu-hover-i-need-some-answers

Answer 1

Waitting for answers