This page shows an example of complex styling. Bugs in Firefox and Mozilla sometimes affect WebDDM, when alternate item content is set. Sometimes menus fail to open because of this. There is no workaround. We have submitted a bug report to Mozilla and hopefully they will fix this soon.
There, however, a simple way to avoid this - don't set item content for certain styles if the "expand_menu" attribute is set to "click".
Affected styles: "content_rollover_pressed", "content_menuopen_pressed".
Note: This bug seems to be fixed in Firefox 1.0. These attributes can be used to completely customize styles:

• content - The content of the item.
• content_rollover - The content of the item when the mouse is over it.
• content_menuopen - The content of the item when its submenu is open.
• content_rollover_pressed - The content of the item when the mouse is over it, and the mouse button is pressed.
• content_menuopen_pressed - The content of the item when its submenu is open, and the mouse button is pressed.
• content_menuopen_rollover - The content of the item when its submenu is open, and the mouse is over the item.
• class - The CSS class of the item.
• class_rollover - The CSS class of the item when the mouse is over it.
• class_menuopen - The CSS class of the item when its submenu is open.
• class_rollover_pressed - The CSS class of the item when the mouse is over it, and the mouse button is pressed.
• class_menuopen_pressed - The CSS class of the item when its submenu is open, and the mouse button is pressed.
• class_menuopen_rollover - The CSS class of the item when its submenu is open, and the mouse is over the item.
• css - CSS attributes for the item.
• css_rollover - CSS attributes for the item when the mouse is over it.
• css_menuopen - CSS attributes for the item when its submenu is open.
• css_rollover_pressed - CSS attributes for the item when the mouse is over it, and the mouse button is pressed.
• css_menuopen_pressed - CSS attributes for the item when its submenu is open, and the mouse button is pressed.
• css_menuopen_rollover - CSS attributes of the item when its submenu is open, and the mouse is over the item.

Note that "rollover" attributes take no effect if the submenu opens when the mouse moves over the item and "menuopen" attributes are set. (think about it for a seconC: it only makes sense)
To fully show the effect of these attributes on this page, the "expand_menu" attribute has been set to "click". Read more about this here.

It is very simple to create a button-like feel for items using the "pressed" styles. Experiment with, for example, changing the borders of items with the pressed styles. This was a tough feature to implement, but it's also VERY important, and it takes the guess-work out of styling menus.
Here's how it works. When a certain style is NOT SET, WebDDM will try to "fall back" to a different style. For example, if "css_menuopen_pressed" is not set, WebDDM will fall back to "css_menuopen". Here is a list of styles and their fallback styles.

• content - Fallback style: N/A.
• content_rollover - Fallback style: "content"
• content_menuopen - Fallback style: "content"
• content_rollover_pressed - Fallback style: "content_rollover"
• content_menuopen_pressed - Fallback style: "content_menuopen"
• content_menuopen_rollover - Fallback style: "content_menuopen"
• class - Fallback style: N/A.
• class_rollover - Fallback style: "class"
• class_menuopen - Fallback style: "class"
• class_rollover_pressed - Fallback style: "class_rollover"
• class_menuopen_pressed - Fallback style: "class_menuopen"
• class_menuopen_rollover - Fallback style: "class_menuopen"
• css - Fallback style: N/A.
• css_rollover - Fallback style: "css"
• css_menuopen - Fallback style: "css"
• css_rollover_pressed - Fallback style: "css_rollover"
• css_menuopen_pressed - Fallback style: "css_menuopen"
• css_menuopen_rollover - Fallback style: "css_menuopen"

View CSS file - View JavaScript file. Examples: Last - Next