title: set all nested li's to be width of widest li
body: <p>How do I make nested li's the same width?</p>
  
  <p>When I use the below code each nested li is only as wide as it's text + margin.</p>
  
  <p>I'd like all of the li's to be as wide as the widest li under the parent ul.</p>
  
  <p>eg:</p>
  
  <pre><code>&lt;ul id="menu"&gt;
      &lt;li &lt;a href="#" title="Menu a"&gt;Menu a&lt;/a&gt;&lt;/li&gt;
      &lt;li &lt;a href="#" title="Menu b"&gt;Menu b&lt;/a&gt;&lt;/li&gt;
      &lt;li &lt;a href="#" title="Nested Menu"&gt;Nested Menu&lt;/a&gt;
          &lt;ul&gt;
              &lt;li &lt;a href="#" title="Menu Item"&gt;Menu Item&lt;/li&gt;
              &lt;li &lt;a href="#" title="Long Menu Item"&gt;Long Menu Item&lt;/a&gt;&lt;/li&gt;
              &lt;li &lt;a href="#" title="Longer Menu Item"&gt;Longer Menu Item&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li &lt;a href="#" title="Menu z"&gt;Menu z&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>with css:</p>
  
  <pre><code>&lt;style type="text/css" media="all"&gt;
  * {
      padding:0; 
      margin:0;
  }
  body, html {
      width: 100%;
      height: 100%;
  }
  #wrapper {
      width: 800px;
      height: 100%;
      margin: auto;
  }
  #menu {
      margin: 0 0 0 8px; 
      padding: 0;
      font-size: 14px; 
      font-weight: normal;
  }
  
  #menu ul {
      list-style-type:none; 
      list-style-position:outside; 
      position:relative; 
      z-index:300; 
      height: 32px;
      font-weight:bold; 
      white-space: nowrap;
      padding:0;
  } 
  #menu a {text-decoration:none; 
      line-height: 32px;
  } 
  #menu a:hover {
  
  } 
  #menu li {
      float:left; 
      position:relative; 
      display: inline; 
      height: 100%; 
      list-style-type: none; 
      padding: 0 20px;
      background: #ccc;
  } 
  #menu ul {
      position:absolute; 
      display:none; 
      left:0px;
      background: #BDCCD4;
      width:100%;
  } 
  #menu ul a, #menu li a {
      display: block;
  }
  #menu li ul {
      background: #BDCCD4;
      display:block;
  }
  #menu li ul a {
      font-weight: normal;
      height:auto; 
      float:left;
  } 
  #menu ul ul {
      padding: 0 9px;
      display:block;
  } 
  #menu li ul li {
      padding: 0 9px;
      background: #BDCCD4;
  }
  #menu li:hover {
      background: #ddd;
      height: 32px;
  }
  #menu li li:hover, #menu li li li:hover {
      background: #ddd;
      height: 32px;
  }
  #menu li a:link, #menu li a:visited {
      text-decoration: none;
      color: #003E7E;
      margin: auto;
  }
  </code></pre>
  
  <p></p>