Hi!
All of my menu items have submenus, and some have up to fourth level submenus, something like this:
<ul id="main-menu" class="sm sm-blue collapsed">
<li><a href="/page-one">Top Level One</a>
<ul>
<li><a href="/one-one">1.1</a></li>
<li><a href="/one-two">1.2</a>
<ul>
<li><a href="/one-two-one">1.2.1</a></li>
<li><a href="/one-two-two">1.2.2</a></li>
</ul>
</li>
<li><a href="/one-three">1.3</a></li>
</ul>
</li>
<li><a href="/page-two">Top Level Two</a>
<ul>
<li><a href="/two-one">2.1</a></li>
<li><a href="/two-two">2.2</a></li>
<li><a href="/two-three">2.3</a></li>
</ul>
</li>
<li><a href="/page-three">Top Level Three</a>
<ul>
<li><a href="/three-one">3.1</a></li>
<li><a href="/three-two">3.2</a>
<ul>
<li><a href="/three-two-one">3.2.1</a></li>
<li><a href="/three-two-two">3.2.2</a>
<ul>
<li><a href="/three-two-two-one">3.2.2.1</a></li>
<li><a href="/three-two-two-two">3.2.2.2</a></li>
<li><a href="/three-two-two-three">3.2.2.3</a></li>
</ul>
</li>
<li><a href="/three-two-three">3.2.3</a></li>
</ul>
</li>
<li><a href="/three-three">3.3</a></li>
</ul>
</li>
</ul>
Currently, I can use the tab key to navigate through the top level items (in other words, I can tab from “Top Level One” to “Top Level Two” to “Top Level Three”) but I would also like to do the following to meet accessibility guidelines:
1. Open submenus when their parent item has focus.
2. Allow users to navigate through the second, third and fourth level submenus using the arrow keys.
Thanks for any help you might be able to give!
.
