Jquery的鼠標離開/鼠標移開和z軸折射率

Question

TTI具有這樣的導航：

<ul> 
    <li><a href='#'>Menu title 1</a> 
     <ul> 
     <li><a href='#'>Submenu title 1</a></li> 
     <li><a href='#'>Submenu title 2</a></li> 
     <li><a href='#'>Submenu title 3</a></li> 
     </ul> 
    </li> 
    <li><a href='#'>Menu title 2</a> 
     <ul> 
     <li><a href='#'>Submenu title 1</a></li> 
     <li><a href='#'>Submenu title 2</a></li> 
     <li><a href='#'>Submenu title 3</a></li> 
     </ul> 
    </li> 
... 

然後與jquery我設置的z-index爲懸停的菜單項的海格作爲子菜單和子菜單中元件褪色。因此，在子菜單上可以看到懸停的菜單項元素，並且所有其他菜單項都位於子菜單下。

現在我需要爲子菜單設置鼠標事件 - mouseleave =>隱藏子菜單。 問題：因爲菜單項現在在子菜單上 - 如果鼠標停留在子菜單上但是懸停菜單項1，jquery將它理解爲子菜單的mouseleave

對我來說這是非常普遍的問題，我總是使用某種「作弊「但我認爲必須有一個簡單的解決方案。

我沒有提供完整的源代碼，但我沒有要求你提供工作代碼，我只是需要一些想法。希望得到幫助，thx。

Answer 1

這裏是你可以用純CSS設置此一個辦法：

http://jsfiddle.net/mblase75/nr8xZ/

訣竅是:hover樣式應用到顯示這些內容只有當一個列表項懸停在子菜單。由於子菜單也是父列表項的一部分，因此只要鼠標懸停在子菜單上，它就會一直顯示。如果需要，您仍然可以爲鏈接和/或列表項添加額外的jQuery/JavaScript交互性。

Answer 2

使用pureCSS菜單，這是更有效和JS免費。你可以使用這個編輯器在線生成你的pureCSS菜單。

http://purecssmenu.com/

而且這是解釋的純CSS菜單背後的基本導向。

http://meyerweb.com/eric/css/edge/menus/demo.html

如果你需要使用jQuery的解決方案，並與CSS特效，本教程會幫助你。

http://www.instantshift.com/2010/07/16/create-simple-dropdown-menu-using-jquery/

希望這有助於。