Example / Supersubs

The result:

The code:

This menu uses the optional (deprecated) Supersubs plugin to make the submenu widths variable. The fixed width set in the CSS is overridden and all menu items within a submenu are altered to match the width of their widest sibling. This is most commonly used to make all menu items fit on one line so that they are all of equal height.

Important note: Unless you really need the submenus to have a max-width, this plugin is no longer needed. The CSS that comes with v1.6.0+ includes a couple of lines that emulate this behaviour. But if you’re sure you need the Supersubs plugin, read on.

Note that Supersubs needs to be called before Superfish in the initialisation chain, as shown below:

<!-- link to the CSS files for this menu type -->
<link rel="stylesheet" media="screen" href="superfish.css">

<!-- link to the JavaScript files (hoverIntent is optional) -->
<!-- if you use hoverIntent, use the updated r7 version (see FAQ) -->
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>
<script src="supersubs.js"></script>

<!-- initialise Superfish -->
<script>
	jQuery(document).ready(function(){
		jQuery('ul.sf-menu').supersubs({
			minWidth:	12,	 // minimum width of submenus in em units
			maxWidth:	27,	 // maximum width of submenus in em units
			extraWidth:	1	 // extra width can ensure lines don't sometimes turn over
							 // due to slight rounding differences and font-family
		}).superfish();		 // call supersubs first, then superfish, so that subs are
							 // not display:none when measuring. Call before initialising
							 // containing tabs for same reason.
	});
</script>

Need help? Check out the Support options available to you.