JQuery Hover li Show div which sits outside li structure

Question

Hi everyone

I'm currently trying to create a "mega" dropout menu using JQuery but have encountered an issue I'm yet to be able to resolve. At the moment I have the following HTML structure:

<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>

In normal circumstances the div containing the "mega" menu options would sit inside the li item that fires the show/hide but this is currently not possible as the ul list of navigation links is rendered using a 3rd party piece of software which does not provide an equivalent of an OnItemDataBound event for me to be able to inject the div into the item

Does anyone know of a way, using JQuery, of showing the div but maintain the display of the div as the mouse focus leaves the li that originaly displayed the div and actually enters the div?

I'm currently using the following JQuery which displays the div correctly but as the mouse focus enters the div the div then disappears as the mouse focus from the li has now moved:

    $(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)


});

Thanks

Dave

Answer 1

To show or hide a div on mouse over and out try this

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

I am sorry, I didn't read your post completely (it is quite lengthy) , but since you are trying to create a mega drop down menu why dont you try this menu.

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

Example:

<ul>
    <li>
        <a href="#">Link 1</a>
        <ul class="submenu">
           <li>Sub Link 1</li>
           <li>Sub Link 1</li>
        </ul>
    </li>
</ul>