menu submenu

HTML

<div class="container">
    <nav>
      <div class="handle">Menu</div>
      <ul id="nav">        
        <li>	
          <a href="#">Purchase</a>
          <ul class="sub-menu">
            <li class="sub-list"><a href="#">Purchase Return</a>
            </li>
          </ul>
      </ul>
    </nav>
  </div>

CSS

body {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul#nav li {
  background: #fff;
  float: left;
}
ul#nav li a {
  color: black;
  display: block;
  background: #fff;
  padding: 10px;
  text-decoration: none;
  border-bottom: 1px solid green;
}
ul#nav li a:hover {
  background: #000;
  color: white;
}
ul#nav li .sub-list {
  float: none;
}
.sub-menu {
  display: none;
}
ul#nav li:hover .sub-menu {
  display: block;
  position: absolute;
}
.handle {
  /*display: none;*/
    padding: 10px;
    border: 1px solid red;
}

JavaScript

$('#nav').hide();
    
    $('.handle').on('click', function(){
        $('#nav').toggle();
    })