我已經有一段時間沒有聽到像標題這樣的內容了，這是一個相當陳舊的UX概念。但是這仍然和多級下拉菜單有很緊密的關系。像鼠標剪頭這樣具有細顆粒度的指針(fine-grained pointer)，有時候不得不穿過十分狹窄的路線才能準確的找到下拉菜單中的選項。這非常容易找錯目標，也許我們可以讓這件事情更容易。
一個基礎CSS解決方法
下拉式菜單是一個十分典型的設計，子菜單的顯示方式，通過對父元素設置:hover實現，或者在Javascript中設置mouseenter/mouseover的狀態來實現。所以更優質的下拉菜單技巧就是預防事件發生的太容易或者擴寬路線的范圍。
通過思考我得到的結果是：因為在CodePen的下拉菜單的實際路線十分窄，為了拓寬路線并阻擋鼠標觸發上下的子菜單項，我在子菜單上增加了兩個看不見的元素，如果鼠標移到這兩個看不見的元素處，什么事情都不會觸發，這就更加符合真實的鼠標使用體驗。
（這段真是好狗血，我沒有直譯，修改了一些內容?！局匾獌热荨课艺J為作者是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在這個課題上發布了一個非常棒的文章。它發現亞馬遜網站的下拉菜單用起來十分爽快，相比那些使用延遲方法的人，亞馬遜則發揮了數學的魅力。如果鼠標處在：所觸發子菜單位置和子菜單之間的三角區域內，鼠標就不會觸發任何其他的菜單按鈕?？炜矗?/p>
Ben把這個東西放進了一個jQuery插件中，并且還制作了一個Demo。
他也十分同意下面的話：
我十分確定這個問題已經解決了很多年。但是這個議題卻經常被世人遺忘、重新發現、重新解決、又被遺忘、被發現、解決...
在我們的行業中，這真是一個悲傷的事實啊。
【Jon Neal 改進了這個插件并增強了數學邏輯，但譯者我覺得不好用，不貼這塊內容了】
瞎扯
我想到有一個智者說過：
有時候用戶登陸你的網站會拿著一個鼠標，但他們有時候卻什么都不拿！
所以，衷心的祝福你的下拉式菜單在觸摸屏上也能正常工作，你當然要讓他們能工作，你也可以打電話給我如果你希望一起提高代碼的效率，或者你想得到一些有趣的發現并為了使用不同的文件需求。
鍵盤對于控制下拉菜單是另一個經典的問題，我不會吝嗇我的任何好主意去幫助你去提高UX。讓我們共同提高吧。
翻譯自：Dropdown Menus with More Forgiving Mouse Movement Paths
【斷斷續續翻譯了兩周，這哥們的書面英語實在是太口語化了，我這個英語渣被虐翻了啊。所以翻譯之處很多都是按照意譯或者理解之后翻譯的，盡可能的在關鍵部分保持正確性，在非關鍵部分保持靈活性，謝謝】
