CSS: Fluid-Width Dropdown Menus

by Curtiss   |   last updated April 7, 2013   |   CSS Tutorials ·

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.

What if you want your top-level menu items to be fluid-width (for instance, the width of the actual text in those items with a little padding on each side) rather than setting them all to a fixed width? What if, in addition, you wanted the dropdown menus to expand appropriately to the width of their children without expanding the width of the top-level parent item? With the concepts shown in most Suckerfish variations, it’s not really possible.

However, while doing some research into the subject the other day, I came across an interesting solution to the issue.

The idea came from a website called pmob and was linked from a SitePoint forum post on the subject. The demo can be found on pmob’s website, but I don’t see it linked anywhere from their home page.

From what I was able to ascertain, the important differences between the pmob demo and the Son of Suckerfish demo are:

1. Set the width of the #nav ul, #nav li and #nav a elements to “auto”
2. The position property for the #nav li elements should be set to “relative”
3. The white-space property for the #nav li li elements should be set to “nowrap” to keep the dropdown menu items from breaking onto multiple lines

In my case, I also chose to set the min-width property to 100% to ensure that my dropdown menus were at least as wide as my top-level menu items.

Below is the modified CSS, based on the Son of Suckerfish demo.

/* Original Son of Suckerfish Styles */
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li {
	float: left;
	width: 10em;
}
#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}

#nav li:hover ul {
	left: auto;
}

/* Style Overrides for Fluid-width Dropdowns */
#nav a, #nav li, #nav li ul {
	width: auto;
}
#nav li {
	position: relative;
}
#nav li li {
	white-space: nowrap;
}
#nav li ul {
	min-width: 100%;
}

I did not modify the Son of Suckerfish HTML at all, so you can use that tutorial as the basis for the HTML elements. As with Suckerfish and Son of Suckerfish, this implementation can be purely CSS, depending on how far back you need to support Internet Explorer (older versions of IE did not support the :hover pseudo-class on any HTML elements other than anchors).

I’ve also uploaded a demo of my fluid-width Suckerfish menu for you to check out, download and pick apart. I hope this helps.

Accessibility Note: This should not be your only method of presenting your menus. Unfortunately, because the menus only appear when you hover over the parent list items these menus are inaccessible. List items are still incapable of receiving focus, so there is no way to keep the dropdown menus open with keyboard movements (unless you use javascript to do so). Therefore, this method of creating menus won’t work for users using anything but a mouse.