Why are my floated list items stacking?

Question

Usually, I can CSS myself out of any corner, but this Friday afternoon issue is getting to me!

Here is the problem. Mouse over the menu items (birthday, wedding, ...) and observe the dropdown.

Originally, I had these list items floating left fine. I've mucked around a lot with the CSS on the rest of the site, and since I checked them again they refused to float next to each other. They just stack up!

It works if I give them an explicit width, but I don't know from the start how wide they will be exactly (generated dynamically).

I'm looking at it on Firefox 3.6.8. The problem also occurs on Safari. I haven't tested any other browsers yet.

What am I doing wrong?

Thanks!

Answer 1

attempt #2

white-space:nowrap; does the trick. Set it on container - #secondary-menu ul li ul. Now submenu is one long line (tried in firebug).

Pretty handy property, I might use it one day too.

Answer 2

Using firebug, I changed the width of #secondary-menu ul li ul to 50em and it straightened out...

#secondary-menu ul li ul width appears to be calculated from a containing box somehow. But 100% of what, the data it contains? that doesn't make sense.

Try putting a div around the ul menu to be the position: absolute, and then the ul can resize inside it...