Problem Animating a Sliding Menu

[Zell]

Hello Everyone.. i have a problem with scriptacoulous.

I have this code...

document.observe('dom:loaded',function(){
$$('.nav3-grid').each(function(el)
{el.hide(); });

$$
('.first').invoke('observe','mouseover',function(){
$$('.nav3-
grid').each(function(el){
if(el.visible())
Effect.SlideUp(el.id,{duration:.7});
});

Effect.SlideDown(this.next().id,{duration:.7});
});

});

And i have this problem, when i pass the mouse over all the .first,
all of the divs pop out one infront of the other one and it looks
horrible... how can i solve that?..if anyone knows, please tell me,
i'm new and im traying very hard to learn :D

Cheers
Thanks

[Diodeus]

Without your HTML it's hard to debug.

[jdalton]

I am not sure what the problem is without an HTML/CSS snippet but you
can perform some optimization and cleanup the code a bit by doing the
following:

document.observe('dom:loaded', function() {
var options = {duration: 0.7}, nav3Grids = $$('.nav3-grid');

nav3Grids.each(Element.hide);
$$('.first').invoke('observe', 'mouseover', function(){
nav3Grids.each(function(el) {
if (el.visible()) el.slideUp(options);
});

this.next().slideDown(options);
});

- JDD