о фокус-событии JQuery

Question

Если я mouseover или focusin над меню 1, в меню 1 появляется синяя линия. Когда я фокусируюсь на меню 1, синяя линия повторяется, исчезают и появляются.

Я хочу, когда я фокусируюсьот меню 1 до меню 2, синяя линия должна существовать. Я пытался найти событие фокусировки (focus, blur, onfocus и т. Д.).

$("#menu .menu1 > li").on("mouseover focusin", function() {
  var ht = $(this).children("#menu .menu2").outerHeight();
  $(this).addClass("on").children("#menu .menu2").addClass("on");
  $("#menu").addClass("on").css("height", ht + 100);
}).on("mouseleave focusout", function() {
  $(this).removeClass("on").children("#menu .menu2").removeClass("on");
  $("#menu").removeClass("on").css("height", "100px");
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  color: #000;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

#menu {
  overflow: hidden;
  position: relative;
  height: 100px;
  transition: height 0.4s;
}

#menu.on {
  background-color: #eee;
}

#menu .menu1 {
  position: relative;
  padding-left: 250px;
  background-color: #fff;
  font-size: 0;
}

#menu .menu1>li {
  display: inline-block;
}

#menu .menu1>li>a {
  display: block;
  position: relative;
  padding: 37px 33px;
  font-size: 18px;
}

#menu .menu1>li>a:before {
  transform: scaleX(0);
  content: "";
}

#menu .menu1>li.on>a {
  color: #0067ac;
}

#menu .menu1>li.on>a:before {
  position: absolute;
  bottom: -5px;
  left: 0;
  z-index: 9999;
  transform: scaleX(1);
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background-color: #0067ac;
  transition: all 0.3s;
}

#menu .menu2 {
  position: absolute;
  top: -9999px;
  left: 0;
  z-index: 2;
  width: 100%;
  padding: 30px;
}

#menu .menu2.on {
  top: 100px;
}

#menu .menu2:after {
  display: block;
  clear: both;
  content: "";
}

#menu .menu2>li {
  float: left;
  width: 25%;
  text-align: left;
}

#menu .menu2>li a {
  display: block;
  position: relative;
  margin: 5px;
  padding: 10px;
  border: 1px solid #0067ac;
  font-size: 15px;
}

#menu .menu2>li>a:hover,
#menu .menu2>li>a:focus {
  background-color: #0067ac;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="menu">
  <ul class="menu1">
    <li>
      <a href="#">menu 1</a>
      <ul class="menu2">
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">menu 1</a>
      <ul class="menu2">
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">menu 1</a>
      <ul class="menu2">
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">menu 1</a>
      <ul class="menu2">
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 2</a></li>
      </ul>
    </li>
  </ul>
</nav>