title: Making a nested CSS menu responsive (100% width)
body: <p>I made a menu already:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
      &lt;li&gt;Menu 1
          &lt;ul class="nav first"&gt;
              &lt;li&gt;Menu 111&lt;/li&gt;
              &lt;li&gt;Menu 22&lt;/li&gt;
              &lt;li&gt;Menu 3333&lt;/li&gt;
              &lt;li&gt;Menu 44
              &lt;ul class="nav"&gt;
                  &lt;li&gt;Menu 111111&lt;/li&gt;
                  &lt;li&gt;Menu 22&lt;/li&gt;
                  &lt;li&gt;Menu 3333&lt;/li&gt;
                  &lt;li&gt;Menu 44&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;Menu 2222&lt;/li&gt;
      &lt;li&gt;Menu 33&lt;/li&gt;
      &lt;li&gt;Menu 4444444&lt;/li&gt;
  &lt;/ul&gt;
  
  #nav, .nav, #nav .nav li { margin:0px; padding:0px; }
  
  #nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;}
  
  #nav li ul.first {left:-1px; top:100%;}
  
  li, li a {color:#000; text-decoration:none;}
  
  #nav .nav li { width: 100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid;
  border-left:none; border-right:none; background:#fff;}
  #nav li a {display:block; width:inherit; height:inherit;}
  
  ul.nav { display:none; }
  #nav li:hover &gt; a, #nav li:hover { color:#fff; background:#000; }
  li:hover &gt; .nav { display:block; position:absolute; width:200px; top:-2px; left:100%; z-index:1000; border:1px #000 solid; }
  li:hover { position:relative; z-index:2000; }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/L8VPk/" rel="nofollow">http://jsfiddle.net/L8VPk/</a></p>
  
  <p>there are two things missing:</p>
  
  <ul>
  <li>When navigating in a sub menu, I want the column be as wide as the widest item (so like it was all a table)</li>
  <li>There are 4 main columns, they should have 25% 25% 25% 25% widths, so auto stretch the browser window. But I don't want to set those widths manually (and there can be more menus)</li>
  </ul>