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

Question

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-Item 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.

It would probably help if you posted your current CSS (maybe put your HTML and CSS on http://jsfiddle.net/) — Wex, Sep 14 '11 at 16:40
Sorry, i would have but it changes frequently so i was hoping for a generic solution — Jai, Sep 14 '11 at 17:54

score 2 · Accepted Answer · answered Sep 14 '11 at 16:41

2

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

answered Sep 14 '11 at 16:41

Jamie Dixon

53,019
19
125
162

1

why is it always the simple solutions that i can't think of... - Thanks! – Jai Sep 14 '11 at 17:54

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

1 Answers1

Linked