I have a menu on my site, which consists of a <ul> of <li>s. Some of
these <li>s contain a <a href="..."> that points directly to a page,
other <li>s contain a new <ul> of links.
Users without JavaScript enabled see just the lists of links (nicely
styled if they accept my CSS). For users with JS and CSS enabled, I
make the menu dynamic by hiding the sub-<li>s, and making them visible
if the mouse hovers over a <li> that contains a submenu. So the code
looks like this:
<ul>
<li><a href="foo">foo</a></li>
<li onmouseover="show('list2')" onmouseout="hide('list2')">
bar:
<ul id="list2" onmouseover="show('list2')"
onmouseout="hide('list2')">
<li><a href="bar1">bar 1</a></li>
<li><a href="bar2">bar 2</a></li>
</ul>
</li>
</ul>
Now I don't want to rely on the mouse, with events like onmouseover
and onmouseout. I would prefer to use onfocus and onblur in addition.
This is in fact one of the accessibility guidelines set up by the W3C
(http://www.w3.org/TR/WCAG10/). Although I'm not sure if I agree with
all of their guidelines, this one seems pretty reasonable.
The problem is, <li> and <ul> elements don't have an onfocus or onblur
attribute. Also, I'm not sure how well onfocus and onblur are
supported by the various browsers.
Any thoughts or suggestions would be welcome!
Garmt de Vries.
