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