make child elements not affect width, but affect height of a parent li?

If you have a simple 2 layer list like so:

<ul>

    <li><a href='#'>Item 1</a></li>
    <li><a href='#'>Item 2</a></li>
    <li>
        <ul>
            <li><a href='#'>Sub-Item 1</a></li>
            <li><a href='#'>Sub-It开发者_JAVA技巧em 2</a></li>
            <li><a href='#'>Sub-Item 3</a></li>
        </ul>
    </li>
    <li><a href='#'>Item 4</a></li>

</ul>

i currently have each 1st level li floating left and no widths have been defined (and i want to keep it that way). However if the text in a 2nd level li is longer than the 1st level li then the 1st level one will expand to the 2nd level.

How can i stop this expansion? baring in mind the 2nd level items are block and NOT absolutely positioned.

By positioning your second level list absolutely you'll take it out of the natural flow of the document.

This will stop the first level li from expanding to accomodate the size of the second level ul

ul li {
  position:relative;
}
ul li ul{
  position:absolute;
}

Working example