我已经有一段时间没有听到像标题这样的内容了，这是一个相当陈旧的UX概念。但是这仍然和多级下拉菜单有很紧密的关系。像鼠标剪头这样具有细颗粒度的指针(fine-grained pointer)，有时候不得不穿过十分狭窄的路线才能准确的找到下拉菜单中的选项。这非常容易找错目标，也许我们可以让这件事情更容易。
一个基础CSS解决方法
下拉式菜单是一个十分典型的设计，子菜单的显示方式，通过对父元素设置:hover实现，或者在Javascript中设置mouseenter/mouseover的状态来实现。所以更优质的下拉菜单技巧就是预防事件发生的太容易或者扩宽路线的范围。
通过思考我得到的结果是：因为在CodePen的下拉菜单的实际路线十分窄，为了拓宽路线并阻挡鼠标触发上下的子菜单项，我在子菜单上增加了两个看不见的元素，如果鼠标移到这两个看不见的元素处，什么事情都不会触发，这就更加符合真实的鼠标使用体验。
（这段真是好狗血，我没有直译，修改了一些内容。【重要内容】我认为作者是CodePen的开发，如今他已经为CodePen添加了两个看不见的元素，所以如今CodePen的下拉列表已经表现十分良好）
这真的是十分轻量级的CSS技术，我很喜欢。但有一点危险的是你会遮住一部分临近的菜单项，这可能意味着一个用户把鼠标放在正确的菜单上却无法点击它。我猜测有很多情况下有人只移动鼠标一点点就能正常工作，但是这显然要有一个平衡点，在很小和很大的移动之间。
回到2005年的历史洪流中，这有一个经典的【定位就是一切】（Position is Everything）的演示：
用CSS扩宽边界
John Gardner创造了一个方法，让所有的菜单都有一个额外的空间包围它们，使鼠标Hover-off的范围增大。
【这里还有一个动态的代码展示，需要到原文中体验】
(Un)Hover意图
你听说过hover意图么（hover intent）。它的概念是区分你是否有想触发Hover的意图。（【译者】说白了就是鼠标要放在菜单上一会儿才会执行事件）这有点像故意延迟。当UI发生暴走的情况时你就可以用它。
相反的我们就有了unhover意图。当我们能立即得到hover事件的效果时，我们却希望unhover不要立即发生。在CSS中，你可以做下面的事情：
记住我们要使用visibility属性，因为它可以使用transition属性，而不是display。
【这里还有一个动态的代码展示，需要到原文中体验】
Javascript也可以完成。和处理防抖动一样，你应该避免鼠标在不小心离开时，菜单消失的功能被立刻触发。你可以通过setTimeout来实现更好的效果，这是十分简单的，但是：
【这里还有一个动态的代码展示，需要到原文中体验】
不过，这些unhover的演示都没有从源头解决路线狭窄的问题，他们通过降低反应速度来处理鼠标问题。
避开狭窄的路线
没有任何规定说明子菜单一定要从旁边出现，如果它们从菜单的下面出现，那么路线就会保持宽阔。这里有一个Timothy M.LeBlanc:的演示
【这里还有一个动态的代码展示，需要到原文中体验】
一个华丽丽的JsvaScript工具
在几年前Ben Kames在这个课题上发布了一个非常棒的文章。它发现亚马逊网站的下拉菜单用起来十分爽快，相比那些使用延迟方法的人，亚马逊则发挥了数学的魅力。如果鼠标处在：所触发子菜单位置和子菜单之间的三角区域内，鼠标就不会触发任何其他的菜单按钮。快看：
Ben把这个东西放进了一个jQuery插件中，并且还制作了一个Demo。
他也十分同意下面的话：
我十分确定这个问题已经解决了很多年。但是这个议题却经常被世人遗忘、重新发现、重新解决、又被遗忘、被发现、解决...
在我们的行业中，这真是一个悲伤的事实啊。
【Jon Neal 改进了这个插件并增强了数学逻辑，但译者我觉得不好用，不贴这块内容了】
瞎扯
我想到有一个智者说过：
有时候用户登陆你的网站会拿着一个鼠标，但他们有时候却什么都不拿！
所以，衷心的祝福你的下拉式菜单在触摸屏上也能正常工作，你当然要让他们能工作，你也可以打电话给我如果你希望一起提高代码的效率，或者你想得到一些有趣的发现并为了使用不同的文件需求。
键盘对于控制下拉菜单是另一个经典的问题，我不会吝啬我的任何好主意去帮助你去提高UX。让我们共同提高吧。
翻译自：Dropdown Menus with More Forgiving Mouse Movement Paths
【断断续续翻译了两周，这哥们的书面英语实在是太口语化了，我这个英语渣被虐翻了啊。所以翻译之处很多都是按照意译或者理解之后翻译的，尽可能的在关键部分保持正确性，在非关键部分保持灵活性，谢谢】
