对角线鼠标悬停与3级深的jQuery下拉菜单

首先，我要说明的是证明了这拨弄所有一切的：对角线鼠标悬停与3级深的jQuery下拉菜单

考虑到深藏在3个级别的导航选项卡;第一级选项卡，第二级：下拉列表。第三级是第二级下拉列表，可以打开。这里有一个视觉：

enter image description here

。它简化HTML将看起来是这样的：

<ul id = "maintabs"> 
    <li>child 1</li> 
    <li>child 2 
     <ul> 
      <li>grand child 1</li> 
      <li>grand child 2 
       <ul> 
        <li>great grand child 1</li> 
        <li>great grand child 2</li> 
        <li>great grand child 3</li> 
       </ul>     
      </li> 
     </ul>  
    </li> 
</ul>

我不会把CSS代码在这里烦，因为实在是太长了，但它可以在小提琴link被发现。

这里是jQuery代码，显示/隐藏基于鼠标移到菜单：

$("ul#maintabs li").hover(function() { 
    $('ul:eq(0)', this).stop(true, true).animate({ 
     height: 'show', 
     opacity: 'show' 
    }, 150); 
}, function() { 
    $('ul:eq(0)', this).animate({ 
     height: 'hide', 
     opacity: 'hide' 
    }, 150); 
})

所有这一切都非常顺利，但是用户交互可以提高导航到第3级的项目。可以说你想导航到西瓜>绿色>真绿黑。所以你将鼠标悬停在“西瓜”上，然后出现下拉菜单，然后将鼠标悬停到“绿色”，然后出现侧边下拉菜单。然后从“绿色”水平悬停到“较暗”，然后垂直悬停到“真绿色”。这是一个visul。鼠标移动是由红色箭头可视化：

enter image description here