Problem with a simple dropdown menu: it keeps collapse??

[123gotoandplay]

Hi,

I am having a problem with
www.bldd.nl/prototypes/megamenu/test11.html

When you quickly rollover the menu it keeps in "rollover" state, how
can i fix this???

regards,

[ccschmitz]

While there are a few problems with your code, I think you could
achieve your desired effect if you threw the ul#slidemenu and
#dropmenu into a containing div and then apply the hover function to
the container.

Something like this:

-- HTML --

<div id"nav-container">
<div class="grid_16 alpha" id="navigatie">
<div class="grid_16 alpha" id="mainmenu">
<ul id="slidemenu">
<li class="menu_a"><a href="#">MENU A</a></li>
<li class="menu_b"><a href="#">MENU B</a> </li>
<li class="menu_c"><a href="#">MENU C</a> </li>
<li class="menu_d omega"><a href="#">MENU D</a> </li>
</ul>
</div>


</div><!-- .end navigatie-->

<div style="display: none;" class="grid_16 alpha omega" id="dropmenu">
<div id="dropcontent">
<ul class="drop_1">
<li><a href="#">A</a></li>
<li><a href="#">AA</a></li>
</ul>
<ul class="drop_2">
<li><a href="#">B</a></li>
<li><a href="#">BB</a></li>
<li><a href="#">BBB</a></li>
<li><a href="#">BBBB</a></li>
<li><a href="#">BBBBB</a></li>
</ul>
<ul class="drop_3">
<li><a href="#">C</a></li>
<li><a href="#">CC</a></li>
<li><a href="#">CCC</a></li>
<li><a href="#">CCCC</a></li>
<li><a href="#">CCC</a></li>
</ul>
<ul class="drop_4">
<li><a href="#">C</a></li>
<li><a href="#">CC</a></li>
<li><a href="#">CCC</a></li>
<li><a href="#">CCCC</a></li>
<li><a href="#">CCC</a></li>
</ul>
</div>
</div>
</div><!-- End Nav Container -->

-- jQuery --

<script type="text/javascript">
$(document).ready(function() {

$("#nav-container").hover(function() {
$("#dropmenu").slideToggle("fast");
}, function() {
$("#dropmenu").slideToggle("fast");
});

});
</script>

Sorry for the poor formatting, but that was copied and pasted from
your HTML.

You might need to add .stop() in there to prevent any unwanted
animation queue as well.

Hope that helps.

Chris

Hi,
I am having a problem withwww.bldd.nl/prototypes/megamenu/test11.html
When you quickly rollover the menu it keeps in "rollover" state, how
can i fix this???
regards,

[123gotoandplay]

Hi Chris,

Tx for thinking along / posting the code ;)

I think i am almost there, but the menu doesn't stop when you quickly
hover it continues to drop down and up.

I tested with
$("#nav-container").hover(function() {
$("#dropmenu").stop().slideToggle("fast");
}, function() {
$("#dropmenu").slideToggle("fast");
});

and
$("#nav-container").hover(function() {
$("#dropmenu").stop().slideToggle("fast");
}, function() {
$("#dropmenu").stop().slideToggle("fast");
});

But that also gives a strange effect, the dropmenu doesn't show up at
all when you quickly hover.

Any suggestions?

[123gotoandplay]

oh, and i am trying to use the hoverflow plugin. (http://www.
2meter3.de/code/hoverFlow/)

but it assumes you are animating the current div/id

I our case the trigger is another div. but this doesn't work

$("#nav-container").hover(function(e) {
$("#dropmenu").hoverFlow(e.type, {top:100},
'fast');
}, function() {
$("#dropmenu").hoverFlow(e.type, {top:0},
'fast');

});