Пункт меню трясется при наведении на nav_drop_item

Question

Когда я наводю курсор на элемент после выбора элемента, элементы трясутся, класс 'nav_drop_open' переключается.

Как я могу это исправить?

$('.nav_drop_item').hover(function() {
  $(this).toggleClass('nav_drop_open');
});

.nav_dropdown {
  max-width: 200px;
  min-width: 200px;
  background: var(--site-white);
  border: 1px solid #e7f1f9;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-height: 100px;
  z-index: 12;
  display: none;
}

.nav_drop_open .nav_dropdown {
  display: block;
}

.nav_dropdown ul li {
  display: block;
  clear: both;
  position: relative;
}

.nav_dropdown ul li a {
  display: block;
  padding: 12px 20px;
  color: var(--site-text);
  font-size: 15px;
}

.nav_dropdown ul li a:hover {
  background: var(--site-blue);
  color: var(--site-white);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav_ul">
  <ul>
    <li><a href="/">Home</a></li>
    <li class="nav_drop_item nav_drop_open">
      <a href="#">About <i class="fa fa-angle-down"></i></a>
      <div class="nav_dropdown">
        <ul>
          <li><a href="/home/about">About</a></li>
          <li><a href="/home/howitworks">How Plan work?</a></li>
        </ul>
      </div>
    </li>
    <li><a href="/home/benefits">Benefits</a></li>
  </ul>
</div>

Answer 1

Вам не нужно использовать javascript для этого.

добавьте это к себе css

.nav_drop_item:hover .nav_dropdown {
    display: block;
}

и удалите javascript и это css строка:

.nav_drop_open .nav_dropdown {
    display: block;
}

Это также исправит мерцание