Arrow keys scroll my scrollable #menubar DIV, unless I tab/select an item buried in the drop-menu .. and then arrow keys do zero.

Have a standard dropdown menu:

<ul id="menubar">
   <li class="drop">
      <ul class="aMenu">
         <li> stuff </li>
         <li> stuff </li>
      </ul>
   </li>
</ul>

I have integrated TABbing + mouse clicks to select menu items via tabindex manipulation.

Much to my joy, apparently the <- and -> keys will scroll the scrollable #menubar.

As long as I select via TABs or mouse clicks the top-most #menubar > li, then the arrow keys do scroll.

But when I select one of the buried menu items li, then arrow keys fail.

I do realize that the arrow keys rely on the top-most #menubar > li having focus.

But I wish to focus one of the down menu li and still scroll with the arrow keys.

In a nutshell, I know this is the problem .. I just don't know how to fix it.

Note: FWIW, I have no key detection code for the arrow keys, just the TAB + Shift-TAB keys.

Apparently the OS does the arrow keys scrolling, but only for when the top #menubar > li has focus.