Delay to show submenu

delay-submenu.js

$('#main-menu .main-menu .nav-item').hover(function() {
    if ($(this).find('.submenu-container').length > 0) {
        $(this).addClass("nav-selected");
        $(this).find('.submenu-container').show();
    }
}, function() {
    var object = $(this);
    setTimeout(function()
    {
        $(object).find('.submenu-container').hide();
        $(object).removeClass("nav-selected");
    }, 300);
});

submenu_example.html

<nav id="main-menu">
  <ul class="main-menu">
    <li class="nav-item nav-first-level">
      <a href="#" class="nav-link">Home</a>
    </li>
    <li class="nav-item nav-first-level">
      <a href="#" class="nav-link">Services</a>
      <div class="submenu-container">
        <ul class="nav-second-level">
          <li class="nav-item">
            <a href="#" class="nav-link">Service A</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Service B</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Service C</a>
          </li>
        </ul>
      </div>
    </li>
    <li class="nav-item nav-first-level">
      <a href="#" class="nav-link">Team</a>
      <div class="submenu-container">
        <ul class="nav-second-level">
          <li class="nav-item">
            <a href="#" class="nav-link">Member A</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Member B</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Member C</a>
          </li>
        </ul>
      </div>
    </li>
    <li class="nav-item nav-first-level">
      <a href="#" class="nav-link">Contact</a>
    </li>
  </ul>
</nav>