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/

實施例：

​​