title: make child elements not affect width, but affect height of a parent li?
body: <p>If you have a simple 2 layer list like so:</p>
  
  <pre><code>&lt;ul&gt;
  
      &lt;li&gt;&lt;a href='#'&gt;Item 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;Item 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href='#'&gt;Sub-Item 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='#'&gt;Sub-Item 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='#'&gt;Sub-Item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;Item 4&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>i currently have each 1st level <code>li</code> floating left and no widths have been defined (and i want to keep it that way). However if the text in a 2nd level <code>li</code> is longer than the 1st level <code>li</code> then the 1st level one will expand to the 2nd level.</p>
  
  <p>How can i stop this expansion?
  baring in mind the 2nd level items are block and <strong>NOT</strong> absolutely positioned.</p>