All the navbar and menu items must be anchors
- text directly inside
<li> is not allowed.
So if you want a submenu trigger that's not an active link,
don't include an href but
give it the class name "nohref" instead:
<li><a class="nohref">Products</a>
<ul>
...
</ul>
</li>
You shouldn't have non-link items in the main navigation bar, only within menus, because:
href
:hover styles to
links with no href
These circumstances are never applicable to menus, which is why it's always safe to have non-link items there.
If you want non-link items to have no rollover either, you can do this using !important rules in external CSS. For example, CSS like this:
/* no rollover on nohref links */
#udm a.nohref {
background-color:transparent !important;
border-color:#f8fbd0 !important;
color:#060 !important;
}
will apply to all states of
nohref links, overriding their
pseudo-classes because !important takes precedence.
However if you do that it will obviously apply to
the focus state as well, and that's an accessibility
problem - there would be no visual indication
when navigating those items with the keyboard,
other than the less-than-reliable browser focus caret.
Therefore
if you do this, you must restore :focus and
:active styles to some extent
(:active is used to
simulate :focus in
IE,
which doesn't otherwise support it):
/* partially restore for focus so you can see when you're on it */
#udm a.nohref:focus, #udm a.nohref:active {
border-color:#aca !important;
}
All comments subject to administrative approval. Comments may be deleted or modified by the site administrator.
UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.