html - Menu Icon won't show after rezise -

basically wanted create media query make nav bar disappear , change menu icon... still won't show. have solution? here's code:

<header>   <div id="logo"></div>   <nav>      <a href="#" id="menu-icon"></a>     <ul>       <li><a href="#" class="current">home</a></li>       <li><a href="#">latest videos</a></li>       <li><a href="#">about me</a></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 media query:

@media screen , (max-width: 478) {   body {     position: absolute;    }  } @media screen , (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;    } } 

according docs, looks need add px after 478:

@media screen , (max-width: 478px) {   body {     position: absolute;    }  } @media screen , (max-width: 478px) {