Unable to hide item in menu - css

Question

So, I have a simple NAV that I came up with, and I'm trying to add a burger icon that will only show up when the screen is small.
Currently, my burger is just the word Menu, but I'd like to have this hidden by default. However, my code is overridden by a display:inline, that is earlier in the code. even if I add !Important.
Any one have any ideas as to how I can hide the menu element?
JSFIDDLE https://jsfiddle.net/Lwwgpx9k/
My code is below.
.html
<div class="nav">
<ul>
<li class="hidden">Menu</li>
<li class="home"><a class="active" href="#">Home</a></li>
<li class="gallery">Gallery</li>
<li class="tutorials">Tutorials</li>
<li class="about">About</li>
</ul>
</div>
.css
body {
background: #333;
}
.nav ul {
color: #e6e9e9;
position: fixed;
top: 60px;
padding-left: 5%;
text-align: center;
margin: 0;
}
.nav ul li {
line-height: 35px;
float: left;
width: 120px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 0px 10px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.nav ul li:hover {
background: #6A1B9A;
color: #e6e9e9;
}
.nav ul li ul {
padding: 0;
position: absolute;
top: 35px;
left: 0;
text-align: left;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
.nav ul li ul li {
width: 200px;
background: #555;
display: block;
color: #e6e9e9;
}
.nav ul li ul li:hover {
background: #6A1B9A;
}
.nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
transition-delay: 2s;
-webkit-transition-delay: 2s;
/* Safari */
}
.nav a {
font-size: 1.4em;
text-decoration: none;
color: #e6e9e9;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #6A1B9A;
color: #e6e9e9;
}
.nav a.active {
background-color: #6A1B9A;
color: #e6e9e9;
cursor: default;
}
.nav ul {
color: #e6e9e9;
position: fixed;
top: 60px;
padding-left: 5%;
text-align: center;
margin: 0;
}
.nav ul li {
line-height: 35px;
float: left;
width: 120px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 0px 10px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.nav ul li:hover {
background: #6A1B9A;
color: #e6e9e9;
}
.nav ul li ul {
padding: 0;
position: absolute;
top: 35px;
left: 0;
text-align: left;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
.nav ul li ul li {
width: 200px;
background: #555;
display: block;
color: #e6e9e9;
}
.nav ul li ul li:hover {
background: #6A1B9A;
}
.nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
transition-delay: 2s;
-webkit-transition-delay: 2s;
/* Safari */
}
.nav a {
font-size: 1.4em;
text-decoration: none;
color: #e6e9e9;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #6A1B9A;
color: #e6e9e9;
}
.nav a.active {
background-color: #6A1B9A;
color: #e6e9e9;
cursor: default;
}
.hidden {
display: none; !important
}

Answer 1

your problem is here
hidden {
display: none; !important<---- this important should be inside ";"
}
it should be
hidden {
display: none !important;
}