responsive navbar using display:none still shows even it is meant to show when the screen resized using media query

i'm trying to fix my responsive navigation bar. supposed to be, when the screen is resized smaller, the navigation will change to a single button which is "menu" and when clicked, it will toggle the navigation vertically. the problem is, even at full screen size, the menu still shows up. this should only appear when screen was changed. thank you

    HTML:
   <div class="nav">
     <ul>
    <li ><a class="active" href="index.php"><a href="#">Home</a></li>
    <li ><a href="">About us</a>
      <ul>
        <li><a href="site_profile.php">Company Profile</a></li>
        <li><a href="#">Management</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Services</a></li>
      </ul>
    </li>
    <li ><a href="#">Contacts</a></li>
    <li ><a href="">Careers</a></li>
    <li ><a href="#">Blog</a>
      <ul>
        <li><a href="#">Tips</a></li>
        <li><a href="#">Success Story</a></li>

      </ul>
    </li>
      <li class="contact"><a href="#">Login</a></li>
  </ul>
  <div class="handle"> Menu </div>
</div>

  CSS:

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0; 
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}

.nav a {
 text-decoration: none;
 color: #fff;
 display: block;
 padding-left: 15px;
 border-bottom: 1px solid #888;
 transition: .3s background-color;
}

.nav a:hover {
  background-color: #005f5f;
}

.nav a.active {
 background-color: #aaa;
 color: #444;
 cursor: default;
}

/* Sub Menus */
.nav li li {
font-size: .8em;
 }

/*******************************************
 MEDIA
********************************************/
.handle.hidden {
 width: 100%;
 background: white;
 text-align: left;
 box-sizing: border-box;
 padding: 15px 10px;
 cursor: pointer;
 color: white;
 display: none;
 }  

 @media screen and (min-width: 650px) {

.nav li {
 width: 130px;
 border-bottom: none;
 height: 50px;
 line-height: 50px;
 font-size: 1.4em;
 display: inline-block;
 margin-right: -4px;
   }

.showing { max-height: 20em; }

 .nav a {
  border-bottom: none;
  }

 .nav > ul > li {
  text-align: center;
  }

  .nav > ul > li > a {
  padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
  position: absolute;
  display: none;
  width: inherit;
  }

 .nav li:hover ul {
 display: block;
  }

 .nav li ul li {
 display: block;
 }
.handle{
    display: block;
    background-color: rgba(0,0,0,0.8);
 }
 }

 SCRIPT:
  <script type="text/javascript">
    $('.handle').on('click', function(){
        $('nav ul').toggleClass('showing');
    });
   </script>