Responsive CSS dropdown menu issue
<p>My dropdown CSS menu works fine when I open it in mobile view, but stays there when I resize the window in my browser. When I try to get rid of it in my CSS media query, the dropdown doesn't work at all..</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function showmenu(){
 var menu = document.getElementById('mobile-menu'), maxH="148px";
 if (menu.style.height == maxH){
  menu.style.height = "0px";

 }else{
  menu.style.height = maxH;
 }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>@media(max-width: 1024px){
 .col-tab1{
 width: 8.33333333333%;
 float: left;
 }

 .col-tab2{
  width: 16.6666666667%;
  float: left;
 }

 .col-tab3{
  width: 25%;
  float: left;
 }

 .col-tab4{
  width: 33.3333333333%;
  float: left;
  
 }

 .col-tab5{
  width: 41.6666666667%;
  float: left;
 }

 .col-tab6{
  width: 50%;
  float: left;
 }

 .col-tab7{
  width: 58.3333333333%;
  float: left;
 }

 .col-tab8{
  width: 66.6666666667%;
  float: left;
 }

 .col-tab9{
  width: 75%;
  float: left;
 }

 .col-tab10{
  width: 83.3333333333%;
  float: left;
 }

 .col-tab11{
  width: 91.6666666667%;
  float: left;
 }

 .col-tab12{
  width: 100%;
  float: left;
 }
 
 .mobile{
 display: none;
 }

 .desktop{
  display: none;
 }
 
 .tablet{
  display: block;
 }

 #nav-toggle{
  width:50px;
  float:right;
  color:white;
  margin:25px;
  display:block;
 }
 
 
 nav ul{
  list-style-type: none;
  margin:auto;
  width:500px;
  height:100%;
  display:none;
 }
  
  #mobile-menu{
    display:none;
    }

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;nav&gt;
   &lt;a href="#" id="nav-toggle" class="menu example5"&gt;&lt;span onclick="showmenu('mobile-menu')"&gt;&lt;/span&gt;&lt;/a&gt;
   &lt;div id="nav-logo"&gt;
    &lt;div id="bar1"&gt;&lt;/div&gt;
    &lt;div id="bar2"&gt;&lt;/div&gt;
    &lt;div id="bar3"&gt;&lt;/div&gt;
    &lt;div id="bar4"&gt;&lt;/div&gt;
    &lt;div id="bar5"&gt;&lt;/div&gt;
    &lt;div id="bar6"&gt;&lt;/div&gt;
    &lt;div id="bar7"&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;ul&gt;
    &lt;a href="#"&gt;&lt;li&gt;&lt;p&gt;ABOUT&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;li&gt;&lt;p&gt;WORK&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;li&gt;&lt;p&gt;SERVICES&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;li&gt;&lt;p&gt;CONTACT&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div id="mobile-menu"&gt;
   &lt;ul&gt;
    &lt;a href="#"&gt;&lt;li&gt;&lt;p&gt;ABOUT&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;li&gt;&lt;p&gt;WORK&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;li&gt;&lt;p&gt;SERVICES&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;li&gt;&lt;p&gt;CONTACT&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
 &lt;/body&gt;</code></pre>
</div>
</div>
</p>