Elusive menu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<nav class="navbar navbar-fixed-top navbar-light bg-primary">
  <div class="row">

    <ul class="nav navbar-nav">
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle">START</a>
        <ul class="dropdown-menu">
          <li class="dropdown-item">Can't</li>
          <li class="dropdown-item">Touch</li>
          <li class="dropdown-item">This!</li>
        </ul>
      </li>
      <li class="nav-item"><a href="#" class="nav-link">STOP</a></li>
    </ul>

    <form class="form-inline float-xs-right">
      <input class="form-control" type="text" placeholder="Stuff">
      <button class="btn btn-default" type="button">Click</button>
    </form>

  </div>
</nav>

CSS

.open>.dropdown-menu{
        margin-top: initial;
    }

JavaScript

const menu = $("li.dropdown");
menu.on("mouseenter mouseleave", () => {
  menu.toggleClass("open");
});