The DropDownMenu widget is a vertical menu (contrast with the horizontal dijit.MenuBar) that is used for:
- drop down menu from dijit/form/ComboButton, dijit/form/DropDownButton, and dijit/MenuBar widgets, typically appearing below the parent widget
- child menu spawned from another DropDownMenu (a.k.a, a nested menu), appearing to the left or right of the parent DropDownMenu
- independent and always visible menu, typically a left-hand-side navigation menu
|Navigate menu items||Up and down arrow keys|
|Activate a menu item||Spacebar or enter|
|Open a submenu||Spacebar, enter, or right arrow|
|Close a context menu or submenu||Esc or left arrow|
|Close a context menu and all open submenus||Tab|
There are separate CSS classes for indicating that a MenuItem is mouse hovered (dijitMenuItemHover), and to indicate which MenuItem is selected/active (dijitMenuItemSelected). In tundra/nihilo/soria they look exactly the same, although that could be customized by a user, including removing the hover effect altogether.
"Selected/active" is in the sense of the selected tab, and is controlled by the mouse or keyboard. Implementation-wise, it means that either the MenuItem has focus, or focus is on a submenu of that MenuItem.
The Menu/MenuBar domNode has a dijitMenuPassive/dijitMenuActive class so that CSS rules for hover can be customized based on whether or not the menu has focus. Once the menu gets focus the dijitMenuHover effect is disabled in favor of the dijitMenuSelected effect, so that the dijitMenuHover effect won't linger on "File" if user moved the mouse over "File" but then used the keyboard arrows to move to the "Edit" MenuBarItem. (This is a setting in tundra/nihilo/soria and can be changed if desired.)