CSS: Fluid-Width Dropdown Menus

More than seven years ago, a fantastic article was posted on A List Apart explaining how to create dropdown menus with pure CSS. Up until that point, most (if not all) Web developers and designers were using javascript in some way to make their dropdown and fly-out menus function. The concept, for whatever reason, was referred to as the “Suckerfish menu“.

Shortly after that article was published, someone else came along and published information about the Son of Suckerfish menus. Other concepts based on the Suckerfish menu came along as well. The major issue with all of those articles and examples, though, is that they seem to require fixed-width menus for some reason. If you don’t set your top-level menu items to be a fixed width, by default the dropdown menu items will either wrap onto multiple or will force the top-level item to expand to fit the dropdown menu.