title: How to adjust menu width according to window width
body: <p>I am designing <code>navigation menu</code>, but I couldn't adjust width according to window. I want to make <code>menu width 100%</code>, as we change the window size, the menu still covers from left corner to right corner.</p>
  
  <p>The following code I am using for designing navigation:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;nav class="span9"&gt;
  &lt;!-- Menu--&gt;
  &lt;ul id="menu" class="sf-menu"&gt;
      &lt;li class=""&gt;&lt;a href="index.html" class="sf-with-ul"&gt;HOME&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="about.html"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="services.html"&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="work.html" class="sf-with-ul"&gt;WORK&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="blog.html" class="sf-with-ul"&gt;BLOG&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="tables_princing.html" class="sf-with-ul"&gt;FEATURES&lt;/a&gt;&lt;/li&gt;                                                        
      &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;!-- End Menu--&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.sf-menu {
      margin: 0;
      padding-top: 7px;
  }
  .sf-menu &gt; li {
      position: relative;
      float: left;
      list-style: none;
      line-height: 20px;
      margin: 0 40px 0 0;
  }
  .sf-menu &gt; li &gt; a {
      text-decoration: none;
      display: block;
      font-size: 17px;
  }
  </code></pre>
  
  <p>Here the <a href="http://jsfiddle.net/5dEAq/" rel="nofollow">JSFIDDLE LINK</a></p>