Developer's manual

Global styles

Since the navigation bar and menus are made of HTML they'll be affected by global styles applying to <ul>, <li> and <a> elements. The menu also uses <span> and <img> to create menu-indicators, and <h*> if you have headings inside the navbar.

In practice, <a> elements are so well-defined that it's extremely unlikely you'll get any problems. But for the others you might, so there's a few things you can do to minimize the chances of conflict:

1. Put the menu stylesheet after any other stylesheets you're using, so that the menu styles take precedence.
2. Avoid global styles on these elements - use descendent selectors instead. For example, if your page container is a <div> with the id of "content", you can use a descendent selector from that: "#content ul { }" rather than simply "ul { }".
3. If all else fails, you can re-inforce the styles you want by addressing the navbar from external CSS. For example, if you can't prevent global text-decoration from affecting the navbar links, just add an !important rule to counteract it: "#udm a { text-decoration:none !important; }".

Putting elements above the menus

The links have dynamic z-index, which continually increases and requires up to 20,000 levels of headroom. If you want other elements to go above the navigation, you'll need to position them with a higher z-index value: 20000 plus whatever you've defined for the navbar's base z order.

Avoiding class name conflicts

You shouldn't have other elements whose class name begins or ends with "udm", because the menu uses CSS3 substring-matching attribute selectors to apply certain styles, for example:

• Skip code example

ul[class^="udm"] {
	...
	}

This will match any element who's class name begins with "udm" (and another selector is used which will match it at the end of a string). So to avoid problems, don't begin or end other class names with that substring.