Begin by creating a Button instance of type "menu," wrapping its text label in an <em> element.

Style the <em> element so that it has a fixed width of 10em, and prevent the characters from exceeding this width by setting its "overflow" property to "hidden."

Finally, add a selectedMenuItemChange event handler to the Button that will update its label when any item in the Menu is clicked.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.