title: Fluid Fullwidth Navbar
body: <p>I am designing a website, and I want to have a nav bar that resizes to the size of the screen.<br/>
  This is what I have right now for html:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;a href="#"&gt;Item 1&lt;/a&gt;
      &lt;a href="#"&gt;Item 2&lt;/a&gt;
      &lt;a href="#"&gt;Item 3&lt;/a&gt;
      &lt;a href="#"&gt;Item 4&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>nav a {
      text-decoration:none;
      font-size:2em;
      color:#fff;
      width:25%;
      display:block;
      float:left;
      background-color:#000;
      text-align:center;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/GJVqR/" rel="nofollow">http://jsfiddle.net/GJVqR/</a><br/>
  This works fine until the screen gets down to a certain size at which point I want the menu items to stack on top of each other.<br/>
  Is there a way to do this without resorting to JS?</p>
  
  <p>EDIT: After receiving a few answers I feel I need to clarify: <a href="http://i.stack.imgur.com/9ID5N.png" rel="nofollow">http://i.stack.imgur.com/9ID5N.png</a><br/>
  This is what I am looking for when the screen gets too small.</p>