Menu Icon won't show after rezise - html

Question

Basically I wanted to create a media query which would make my nav bar disappear and change into a menu icon... however it still won't show. Does anyone have a solution? Here's my code:
<header>
<div id="logo"></div>
<nav>
<ul>
<li>Home</li>
<li>Latest Videos</li>
<li>About Me</li>
</ul>
</nav>
</header>
my CSS:
nav {
float: right;
padding: 35px 20px 20px 0px;
}
#menu-icon{
display: hidden;
width: 40px;
height: 40px;
background-image: url(http://www.w3newbie.com/wp-content/uploads/icon.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
nav ul li {
font-size: 25px;
display: inline-block;
float: left;
padding: 20px;
}
.current {
color: #fff;
text-decoration: underline;
}
and finally my media query:
#media screen and (max-width: 478) {
body {
position: absolute;
}
}
#media screen and (max-width: 478) {
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background-color: #405580;
border: 1px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 2px 0 2px 2px;
}
nav li {
text-align: center;
width:: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
}

Answer 1

According to the docs, looks like you need to add the px after 478:
#media screen and (max-width: 478px) {
body {
position: absolute;
}
}
#media screen and (max-width: 478px) {

Answer 2

First off display: hidden; isnt a thing. You are looking for display:none.
Additionally you can use visibility: hidden; or visibility: visible;
If an object is set to display:none. And then you want to reveal it again at a specific screen width. You need to change the display value of that object in your media query.
display:block; or display:inline-block; or even in some cases display:inline;
For example:
#menu-icon{
display: none;
width: 40px;
height: 40px;
background-image: url(http://www.w3newbie.com/wp-content/uploads/icon.png) center;
}
#media screen and (max-width: 478px) {
#menu-icon{
display: block;
}
}