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.

Three-Column Layouts

For me, it’s pretty rare that I develop fluid website layouts, so I’ve not played much with them. However, as part of a recent project, I needed a way to create a fixed-width sidebar and a fluid second column. I started searching around, and came across an old (January 2006) article from A List Apart (ALA). Although it’s old, it’s still extremely useful. It’s fairly aptly titled “The Holy Grail.”

The article explains how to create a three-column layout with fixed-width side columns and a fluid center column. For this particular application, I modified it slightly to use a two-column layout, but I’ve since realized just how powerful and useful the techniques described in the article are.