title: Menu Icon won't show after rezise
body: <p>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:</p>
  
  <pre><code>&lt;header&gt;
    &lt;div id="logo"&gt;&lt;/div&gt;
    &lt;nav&gt; 
      &lt;a href="#" id="menu-icon"&gt;&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#" class="current"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Latest Videos&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>my CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>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;
  }
  </code></pre>
  
  <p>and finally my media query: </p>
  
  <pre><code>@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; 
    }
  }
  </code></pre>