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;
}
UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.