Show/Hide Submenu item on click jquery

<nav>
  <ul class="nav">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li>
      <a href="#">Menu item with submenu</a>
      <ul class="sub-menu">
        <li><a href="#">Submenu item</a></li>
        <li><a href="#">Submenu item</a></li>
        <li><a href="#">Submenu item</a></li>
      </ul>
    </li>
  </ul>
</nav>

.nav li {
  list-style: none;
  padding: 5px 10px;
}

.nav > li {
  float: left;
}

.nav .sub-menu {
  display: none;
}


// Change 'click' to 'hover' if you want to
<script>
$(document).ready(function(){
$('.nav li > .sub-menu').parent().click(function() {
  var submenu = $(this).children('.sub-menu');
  if ( $(submenu).is(':hidden') ) {
    $(submenu).slideDown(200);
  } else {
    $(submenu).slideUp(200);
  }
});
});
</script>