Mob Nav Menu Shows & Hides on Media Query Shrink - html

Question

If you look at code, when shrinking page, the menu quickly shows up and then slides back down. I'd like it to not show up at all when page shrinks. I can't understand why this is happening.
I assume it may be smth with transitions on #nav instead of input[type="checkbox"]:checked + #nav, but i need to have animation on #nav. I had separate file I played with just for mobile nav and it worked fine. As soon as I started working with media queries things go south.
here's fiddle:
https://jsfiddle.net/reizer/fwzsxrnt/
* {margin:0;padding:0;border:0;list-style:none;font-size:100%;font:inherit;vertical-align:baseline;}
/*RESET*/
body {font: 1em Arial, Helvetica, sans-serif;}
#wrapper {
max-width: 960px;
margin: auto;
}
#nav {
display: block;
max-height: 0em;
overflow: hidden;
transition: max-height 0.5s ease;
-webkit-transition: max-height 0.5s ease;
-moz-transition: max-height 0.5s ease;
-o-transition: max-height 0.5s ease;
}
input[type="checkbox"] {
position: absolute;
margin-top: -100em;
}
input[type="checkbox"]:checked + #nav{
max-height: 20em;
}
label {
background: #9c0;
cursor: pointer;
display: block;
overflow: auto;
padding-left: 1em;
background-color: #9C0;
background: -moz-linear-gradient(top, #99cc00 0%, #85b100 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99cc00), color-stop(100%,#85b100));
background: -webkit-linear-gradient(top, #99cc00 0%,#85b100 100%);
background: -o-linear-gradient(top, #99cc00 0%,#85b100 100%);
background: -ms-linear-gradient(top, #99cc00 0%,#85b100 100%);
background: linear-gradient(to bottom, #99cc00 0%,#85b100 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cc00', endColorstr='#85b100',GradientType=0 );
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #FFF;
font-size: 1.6em;
line-height: 2.6em;
}
label:after {
content: "\f039";
float: right;
background-color: #669900;
padding: 0.2em 0.3em 0.1em;
margin: 0.5em;
font: 1.2em FontAwesome;
border-radius: 0.3em;
-webkit-box-shadow: inset 0em 0.1em 0.2em 0em rgba(0,0,0,0.3);
-moz-box-shadow: inset 0em 0.1em 0.2em 0em rgba(0,0,0,0.3);
box-shadow: inset 0em 0.1em 0.2em 0em rgba(0,0,0,0.3);
}
#nav ul li a {
background: #690;
border: solid #90c12f;
border-width: 1px 0 0;
text-decoration: none;
padding: 1em;
display: block;
color: #FFF;
}
#nav ul li a:hover, #nav ul li a:active {
background: #abd728;
}
#media screen and (min-width: 479px) {
.d----onttouchshituntilthispoin----t {
}
label {
display:none;
}
#nav {
display: table;
width: 100%;
max-height: 20em;
overflow: auto;
}
#nav ul {
display: table-row;
}
#nav ul li {
display: table-cell;
}
#nav ul li a {
color: #000;
position: relative;
text-align: center;
text-indent: 20px;
border: solid #000;
border-width: 0 1px 0 0;
line-height: 3.4em;
padding: 0px 20px 0px 0px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
} #nav ul li:last-child a{border:none}
#nav ul li a:hover {
position: relative;
text-indent: 0px;
padding-right: 40px;
}
#nav ul li a:before {
font-family: FontAwesome;
content: "\f078";
position: absolute;
right: 1em;
margin-top: -0.85em;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#nav ul li a:hover:before {
margin-top: 0em;
visibility: visible;
opacity: 1;
}
#nav ul li a ul li {
position: absolute;
background: #FF0;
display: block;
width: 100%;
height: 0em;
visibility: hidden;
opacity: 0;
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
-webkit-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
-o-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
-moz-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
}
#nav ul li a:hover ul li {
visibility: visible;
opacity: 1;
height: 1em;
-webkit-transition:height 0.5s ease;
transition:height 0.5s ease;
-o-transition:height 0.5s ease;
-moz-transition:height 0.5s ease;
}
<div id="wrapper"><div id="logo"></div><label for="toggle">menu</label>
<input type="checkbox" id="toggle">
<div id="nav">
<ul>
<li>Home<ul><li></li></ul></li>
<li>About<ul><li></li></ul></li>
<li>Products<ul><li></li></ul></li>
<li>FAQ<ul><li></li></ul></li>
<li>Support<ul><li></li></ul></li>
<li>Contact<ul><li></li></ul></li>
</ul>
</div>
test
</div>

Answer 1

Just remove max-height: 20em; from #nav in the media query.
JSFiddle Here
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/*RESET*/
body {
font: 1em Arial, Helvetica, sans-serif;
}
#wrapper {
max-width: 960px;
margin: auto;
}
#nav {
display: block;
max-height: 0em;
overflow: hidden;
transition: max-height 0.5s ease;
-webkit-transition: max-height 0.5s ease;
-moz-transition: max-height 0.5s ease;
-o-transition: max-height 0.5s ease;
}
input[type="checkbox"] {
position: absolute;
margin-top: -100em;
}
input[type="checkbox"]:checked + #nav {
max-height: 20em;
}
label {
background: #9c0;
cursor: pointer;
display: block;
overflow: auto;
padding-left: 1em;
background-color: #9C0;
background: -moz-linear-gradient(top, #99cc00 0%, #85b100 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #99cc00), color-stop(100%, #85b100));
background: -webkit-linear-gradient(top, #99cc00 0%, #85b100 100%);
background: -o-linear-gradient(top, #99cc00 0%, #85b100 100%);
background: -ms-linear-gradient(top, #99cc00 0%, #85b100 100%);
background: linear-gradient(to bottom, #99cc00 0%, #85b100 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#99cc00', endColorstr='#85b100', GradientType=0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #FFF;
font-size: 1.6em;
line-height: 2.6em;
}
label:after {
content: "\f039";
float: right;
background-color: #669900;
padding: 0.2em 0.3em 0.1em;
margin: 0.5em;
font: 1.2em FontAwesome;
border-radius: 0.3em;
-webkit-box-shadow: inset 0em 0.1em 0.2em 0em rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0em 0.1em 0.2em 0em rgba(0, 0, 0, 0.3);
box-shadow: inset 0em 0.1em 0.2em 0em rgba(0, 0, 0, 0.3);
}
#nav ul li a {
background: #690;
border: solid #90c12f;
border-width: 1px 0 0;
text-decoration: none;
padding: 1em;
display: block;
color: #FFF;
}
#nav ul li a:hover,
#nav ul li a:active {
background: #abd728;
}
#media screen and (min-width: 479px) {
.d----onttouchshituntilthispoin----t {} label {
display: none;
}
#nav {
display: table;
width: 100%;
overflow: auto;
}
#nav ul {
display: table-row;
}
#nav ul li {
display: table-cell;
}
#nav ul li a {
color: #000;
position: relative;
text-align: center;
text-indent: 20px;
border: solid #000;
border-width: 0 1px 0 0;
line-height: 3.4em;
padding: 0px 20px 0px 0px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#nav ul li:last-child a {
border: none
}
#nav ul li a:hover {
position: relative;
text-indent: 0px;
padding-right: 40px;
}
#nav ul li a:before {
font-family: FontAwesome;
content: "\f078";
position: absolute;
right: 1em;
margin-top: -0.85em;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#nav ul li a:hover:before {
margin-top: 0em;
visibility: visible;
opacity: 1;
}
#nav ul li a ul li {
position: absolute;
background: #FF0;
display: block;
width: 100%;
height: 0em;
visibility: hidden;
opacity: 0;
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
-webkit-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
-o-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
-moz-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
}
#nav ul li a:hover ul li {
visibility: visible;
opacity: 1;
height: 1em;
-webkit-transition: height 0.5s ease;
transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
}
<div id="wrapper">
<div id="logo"></div>
<label for="toggle">menu</label>
<input type="checkbox" id="toggle">
<div id="nav">
<ul>
<li>Home<ul><li></li></ul>
</li>
<li>About<ul><li></li></ul>
</li>
<li>Products<ul><li></li></ul>
</li>
<li>FAQ<ul><li></li></ul>
</li>
<li>Support<ul><li></li></ul>
</li>
<li>Contact<ul><li></li></ul>
</li>
</ul>
</div>
test
</div>