Exploring the menu CSS framework classes

Using Firebug for Firefox (or another generic DOM explorer), we can see that a variety of classnames are added to the different underlying HTML elements that go to make up a menu widget.

Let's review these classnames briefly and see how they contribute to the overall appearance of the widget. To the outer container <ul>, the following classnames are added:

Classname	Applies/Applied to
ui-menu	The outer container of the menu.
ui-widget	The outer container of all widgets. It sets font family and font size to widgets.
ui-widget-content	Applies content container styles to an element and its child text, links, and icons (applicable to a parent or sibling of the header).
ui-corner-all	Applies corner radius to all four corners of the element
ui-menu-icons	The submenu icons set via the icons option when initiating the menu.

The first element within the container is the <li> element. This element receives the following classnames...