（翻译）垂直下拉菜单（Vertical Dropdown Menu）

问题概述

  用户需要在网站的各个模块间导航，但是网页中显示导航信息的空间有限。

示例

用途

• 用于当网站包含2~9个模块，需要分级导航结构时；
• 当网站功能设计与桌面应用程序类似时，菜单结构也可与桌面应用程序类似[1]；
• 如果需要标识当前模块在网站中的位置，不要使用本模式，可以采用导航标签模式。

解决方案

  在同一水平位置上显示一组功能项，用户将鼠标移动到某一项上时，在该项下方会显示包含一组新的选项的下拉列表。这时，用户可以在此垂直下拉列表中选择需要的菜单项。[2]
  一旦用户将鼠标移出下拉列表区域，该下拉列表随即隐藏。将鼠标移动到另一个功能项上，会重复上述过程。
  用户无法一直完美地照着应用系统期望的方式执行操作。为了应对用户出错的情况，并指导用户照着应用系统期望的方式操作，可以实施以下策略：

• 触发鼠标移出事件时（用户将鼠标移出下拉列表区域），延时隐藏下拉列表框（通常延迟200到300毫秒）；
• 将每个菜单项的区域宽度设置为稍宽于菜单项的文本内容宽度，这样便于用户将鼠标移动到菜单项上；
• 用户鼠标移动到某一功能项上时改变鼠标形状。

其它注意事项

  存在多种类型的下拉菜单。有些下拉菜单纯粹使用JavaScript实现的，该类菜单无法与搜索引擎良好合作。为了能让搜索引擎对网页进行索引，应在网页的加载阶段初期创建HTML格式的下拉菜单，这比在网页加载完毕后使用JavaScript创建下拉菜单要好的多。

说明

  下拉菜单节省网页空间，这是使用下拉菜单的主要原因。另外，下拉菜单不是一门增加用户可用性的技术，通常它比较难用。
  弹出式菜单仅固定显示网页上的顶层菜单，当鼠标移动到菜单上时才会显示更深层次的子菜单。[3]

原文地址：http://ui-patterns.com/patterns/VerticalDropdownMenu
[1]原文：Use when your functionality resembles one of a desktop application. Imitate the metaphor.
[2]原文：A list of main sections is listed on the same horizontal line. Once the user has his mouse cursor over one of the list items, a drop-down list of new options is shown below the list item the mouse cursor is pointing at. The user can then follow the now vertically extended list item down, to select the menu item he wants to click.
[3]原文：Flyout menus allow for only showing top levels of the page’s hierarchy permanently, while still giving the option to show deeper levels on mouse o