Fluid width Son of Suckerfish dropdown menus

For CSS dropdown menus, I usually stick with the Son of Suckerfish dropdowns. The technique works extremely well, but there's one small thing that's always bothered me: the width of the dropdown开发者_如何学Go links is always fixed.

Are there any ways to automatically resize the width of the items in a Suckerfish dropdown menu? If not, are there any other CSS-based dropdown menu strategies that can accomplish this?

Not necessarily. If you set the secondary list items to clear left, then they will stack on top of each other.

The problem there however is that if you want to change the background color on hover you have to set a fixed width, or else you'll have list items of varying widths.

But if you don't have to change the BG color, it's a nice way to do it and keep things fluid.

Because the li elements are floated inside the ul element, they need to have a set width that is equal to the ul element. Otherwise, they will all be on the same line. The fixed width forces each one to jump to the next line.

Example: http://jsfiddle.net/ZhguL/3/

If you want, you can use jQuery or just plain JavaScript to calculate the width of the longest menu item in each ul and set each li and the ul's widths to this this value.

Take a look at this page, it helped me out. You can do it without using js. http://www.pmob.co.uk/temp/dropdown-all-fluid.htm