jQuery megamenu with 'flyout'

[tomparker]

This may be a little 'outside the box' as far as mega menu's go, but I'm trying to do a 'flyout' or submenu off of a mega. Take a look at http://morningstartv.com, and hover over 'Channels'. When 'Sunday Services' is hovered over, I want a menu to appear to the right, like the next level in a dropdown. I actually have that working, but the problem is, when Channels is hovered over, it's displaying the submenu, when I only want that to be displayed when 'Sunday Services' is hovered over.

I can post the code that i have done to try to make this work, but before doing that, I thought it might be best to throw this out there and get feedback on how to make this happen.

btw, I have suggested to the client some alternatives that would totally replace this , but it would be good to get it working in the interim if possible.

Thanks,
Tom

[LastMitch]

tomparker

I can post the code that i have done to try to make this work, but before doing that, I thought it might be best to throw this out there and get feedback on how to make this happen.

I went on the website you provided and try to see what you are talking about but I really don't understand what you are talking about.

Can you post a image of what you are talking.

[tomparker]

Thanks @LastMitch for checking it out. I've created a subdirectory on my server as a 'work area' with a trimmed down version of the page and files involved. http://web101marketing.com/msm Here you can see how the worship and teaching dropdown is displayed as soon as you hover over channels. I don't want that displayed until 'sunday services is hovered over. As it is now, once you hover over 'Sunday Services' and then hover out, it works as it should, as long as the pointer stays inside the menu.

I have the css code for the 'dropdown', on the index page itself. The css for the megamenu is in a minified file on the morningstar website, but I have a copy of the 'non-minified' code that pertains to the menu in http://web101marketing.com/msm/topnav.css

[LastMitch]

@tomparker

Take out the <ul> </ul> tags:

<div class="sub2" id="sub2Div">
<li><a href="#">Worship</a></li>
<li><a href="#">Teaching</a></li>
</div>   

[tomparker]

@LastMitch

I tried what you suggested, also modifying the css reflecting that the ul was no longer there, but it didn't work. I'm pretty sure I need the ul to remain, because worship, and teaching are a 'sub list' of Sunday Services. I'm thinking the issue is more along the lines of the hoverIntent script is displaying the sub2 div when 'Channels" is hovered over, becuause it's a child of the sub div. I need to prevent that from happening.

Any ideas?

[LastMitch]

I'm pretty sure I need the ul to remain, because worship, and teaching are a 'sub list' of Sunday Services. I'm thinking the issue is more along the lines of the hoverIntent script is displaying the sub2 div when 'Channels" is hovered over, becuause it's a child of the sub div. I need to prevent that from happening.

I can't find CSS sub2 from this list:

http://www.web101marketing.com/msm/topnav.css

So that's why I ask you take it out.

If you have a CSS sub2 then post it.

[tomparker]

@lastMitch

I thought I posted a response to this yesterday but apparently it didn't save, maybe I was timed out...anyway, I resolved the problem by adding the following css:

ul#topnav li:hover > .sub2  {
    opacity: 1;
    display: block;
}

I also took out the lines that I had added to the navmenu.js, pertaining to .sub2., which was applying hoverIntent.

btw, sorry if I wasn't clear enough on the location of the css for sub2, it's on the index page in the header. The topnav.css file is the css 'cut' from the minified css file, just for reference, it's not being loaded.

Thanks for your time looking into it!