I have a load of nested <ul>'s and <li>'s and I would like
to be able
to have a hover / selected class on an <li>, and use the keyboard up and down buttons
to select up and down on the <li>s.. however they are nested and need
to jump across <ul>s if necessary.
For instance:
<ul>
<li class='cat'>
cat 1
<ul>
<li class='hover'>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
<li class='cat'>
cat 2
<ul>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
</ul>
<ul class='subcat'>
<li class='cat'>
Cat 3
<ul>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
</ul>
</li>
</ul>
</li>
<li class='cat'>
cat 4
<ul>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
</ul>
</li>
</ul>
As I press the down key I wish the items
to be selected in numerical order (they do not have numerical order IDs and sometimes some of them are hidden so they should be ignored. But it needs
to go
to the next <li> that isn't a category and set that as hover.
