JQuery悬停李显示div位于外部李结构

Question

我目前正在尝试使用JQuery创建一个“大型”丢失菜单，但遇到了问题，我还没有能够解决。目前，我有以下HTML结构：

<div id="TopNav" class="grid_16"> 
    <ul class="cmsListMenuUL level0" id="TopNavMenu"> 
     <li class="cmsListMenuLIcmsListMenuLI highlightedLI" id="TopNavMenu_Home"><a href="/"> 
      <span class="text">Home</span></a></li> 
     <li class="cmsListMenuLIfirst" id="TopNavMenu_0_1"><a href="/Key-Sectors.aspx" class="cmsListMenuLink"> 
      <span class="text">Key Sectors</span></a></li> 
     <li class="cmsListMenuLI" id="TopNavMenu_0_2"><a href="/Global-Brands.aspx" class="cmsListMenuLink"> 
      <span class="text">Global Brands</span></a></li> 
     <li class="cmsListMenuLI" id="TopNavMenu_0_3"><a href="/News---Features.aspx" class="cmsListMenuLink"> 
      <span class="text">News &amp; Features</span></a></li> 
     <li class="cmsListMenuLI" id="TopNavMenu_0_4"><a href="/Videos.aspx" class="cmsListMenuLink"> 
      <span class="text">Videos</span></a></li> 
     <li class="cmsListMenuLI" id="TopNavMenu_0_5"><a href="/Events.aspx" class="cmsListMenuLink"> 
      <span class="text">Events</span></a></li> 
     <li class="cmsListMenuLI" id="TopNavMenu_0_6"><a href="/Key-Cities.aspx" class="cmsListMenuLink"> 
      <span class="text">Key Cities</span></a></li> 
     <li class="cmsListMenuLI" id="TopNavMenu_0_7"><a href="/Doing-Business-in-Yorkshire.aspx" 
      class="cmsListMenuLink"><span class="text">Doing Business in Yorkshire</span></a></li> 
     <li class="cmsListMenuLI" id="TopNavMenu_0_8"><a href="/How-We-Can-Help.aspx" class="cmsListMenuLink"> 
      <span class="text">How We Can Help</span></a></li> 
     <li class="cmsListMenuLI" id="TopNavMenu_0_9"><a href="/Contact-Us.aspx" class="cmsListMenuLink"> 
      <span class="text">Contact Us</span></a></li> 
    </ul> 
</div> 
<div class="sectorsDropped"> 
    <div class="floatLeft leftColumn"> 
     <div class="parentItem" style="border-color: #0064BE;"> 
      <a href="/Key-Sectors/Advanced-Engineering---Materials.aspx" class="parentItemContent"> 
       Advanced Engineering &amp; Materials</a><div class="childItem"> 
        <a href="/Key-Sectors/Advanced-Engineering---Materials/Nuclear.aspx">- Nuclear</a></div> 
      <div class="childItem"> 
       <a href="/Key-Sectors/Advanced-Engineering---Materials/Logistics---Infrastructure.aspx"> 
        - Logistics &amp; Infrastructure</a></div> 
     </div> 
     <div class="parentItem" style="border-color: #FFB611;"> 
      <a href="/Key-Sectors/Chemicals.aspx" class="parentItemContent">Chemicals</a></div> 
     <div class="parentItem" style="border-color: #B7CC0B;"> 
      <a href="/Key-Sectors/Environmental-Technologies.aspx" class="parentItemContent">Environmental 
       Technologies</a><div class="childItem"> 
        <a href="/Key-Sectors/Environmental-Technologies/Offshore-Wind.aspx">- Offshore Wind</a></div> 
      <div class="childItem"> 
       <a href="/Key-Sectors/Environmental-Technologies/Carbon-Capture---Storage.aspx">- Carbon 
        Capture &amp; Storage</a></div> 
      <div class="childItem"> 
       <a href="/Key-Sectors/Environmental-Technologies/Tidal-Power.aspx">- Tidal Power</a></div> 
      <div class="childItem"> 
       <a href="/Key-Sectors/Environmental-Technologies/Biomass.aspx">- Biomass</a></div> 
     </div> 
    </div> 
    <div class="floatLeft rightColumn"> 
     <div class="parentItem" style="border-color: #AC26AA;"> 
      <a href="/Key-Sectors/Digital---New-Media.aspx" class="parentItemContent">Digital &amp; 
       New Media</a></div> 
     <div class="parentItem" style="border-color: #e1477e;"> 
      <a href="/Key-Sectors/Food---Drink.aspx" class="parentItemContent">Food &amp; Drink</a></div> 
     <div class="parentItem" style="border-color: #00c5b5;"> 
      <a href="/Key-Sectors/Healthcare-Technologies.aspx" class="parentItemContent">Healthcare 
       Technologies</a><div class="childItem"> 
        <a href="/Key-Sectors/Healthcare-Technologies/Biotechnology.aspx">- Biotechnology</a></div> 
      <div class="childItem"> 
       <a href="/Key-Sectors/Healthcare-Technologies/Pharmaceuticals.aspx">- Pharmaceuticals</a></div> 
      <div class="childItem"> 
       <a href="/Key-Sectors/Healthcare-Technologies/Medical-Devices.aspx">- Medical Devices</a></div> 
     </div> 
     <div class="parentItem" style="border-color: #AC1A2F;"> 
      <a href="/Key-Sectors/Financial---Professional.aspx" class="parentItemContent">Financial 
       &amp; Professional</a></div> 
    </div> 
</div> 

在正常情况下包含了“特大”菜单选项会坐在触发该显示/隐藏李物品内部的DIV但是这是目前不可能的，因为UL导航链接列表使用第三方软件提供，该软件没有提供相当于OnItemDataBound事件，因此我无法将div注入到项目中

有谁知道使用JQuery的方式显示div但保持div的显示，因为鼠标焦点离开原来显示div的li并实际进入div？

我目前使用下面的JQuery这正常，但显示DIV为鼠标焦点进入股利股利然后消失在鼠标焦点从里已经感动：

$(document).ready(function() { 

    function addMega(){ 
    $(".sectorsDropped").toggle("fast"); 
    } 

    function removeMega(){ 
    $(".sectorsDropped").toggle("fast"); 
    } 

var megaConfig = { 
    interval: 500, 
    sensitivity: 4, 
    over: addMega, 
    timeout: 500, 
    out: removeMega 
}; 

$("#TopNavMenu_0_1").hoverIntent(megaConfig) 


}); 

感谢

戴夫

Answer 1

要显示或隐藏在鼠标一个div过来了 试试这个

$("menubutton").mouseover(function(){ 
    $("#submenudiv").show(); 
}).mouseout(function(){ 
    $("#submenudiv").hide(); 
}); 

对不起，我没有完全阅读你的文章（这是相当长的），但是因为你正在尝试创建一个巨大的下拉菜单，为什么不尝试这个菜单。

http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/

实施例：

​​