[jQuery] Horizontal menu with slide down and hover bug with firefox

[Jsbeginner]

Hello,
I've been looking for a way to make my horizontal menu work with firefox 
using jquery slideDown and Up animations instead of fadeout .

The problem is that with firefox if you move the mouse out of the sub 
menu area and then in again before the animation had finished the sub 
menu starts sliding up and down untill you move the mouse away again.

Here is how I've done my menu :


HTML :
 <div id="menu">
 <dl>
 <dt>Item 1</dt>
 <dd>
 <ul>
 <li>Item 1.1</li>
 <li>Item 1.2</li>
 <li>Item 1.3</li>
 <li>Item 1.4</li>
  </ul>
 </dd>
 </dl>
 <dl>
 <dt>Item 2</dt>
 <dd>
 <ul>
 <li>Item 2.1</li>
 <li>Item 2.2</li>
 <li>Item 2.3</li>
 <li>Item 2.4</li>
 </ul>
 </dd>
 </dl>
 </div>

CSS :
#menu dd {
display: none;
}

Javascript :
function mnutoggle(){
    $('#menu dl').each(function(){
        var menu = $(this);
        menu.hover(function(){$('> dd',this).slideDown('fast')  } , 
function(){$('> dd',this).slideUp('fast')  });
    });   
}

$(document).ready(function(){
    mnutoggle();                       
});

To try and stop this problem I decided to try and delay the slidedown 
unless slideup has finished and stop the slideup unless the slide down 
has finished.

In order to do this I introduced a variable which says if the animation 
has finished or not, this works in the sense that if you hover quickly 
over an element it continues to finish the animation but for some reason 
still has the same bug with firefox, here's the code (I used the 
following code to do the delay of 300 ms :
animate({opacity: 1.0}, 300)
Here is the full code :

function mnutoggle(){
    $('#menu dl').each(function(){
        var state = 'up';
        var menu = $(this);
        menu.hover(function(){
            if(state == 'up') {
                $('> dd',this).slideDown(300, function(){ state = 
'down' })
            } else {
                $('> dd',this).animate({opacity: 1.0}, 
300).slideDown(300, function(){state = 'down';});
            }
        } , function(){
            if(state == 'down') {
                $('> dd',this).slideUp(300, function(){state = 'up';})
            } else {
                $('> dd',this).animate({opacity: 1.0}, 
300).slideUp(300, function(){state = 'up';});
            }            
        });
    });   
}

$(document).ready(function(){
    mnutoggle();                       
});

This code makes the menu go right up and right down each time but 
firefox seems to store the next thing to do and when you bring the mouse 
over the sub menu before the animation has finished it goes up and then 
down and then up continues untill you move the mouse away.

Is there a way to get around this problem ? FadeIn and out does not have 
this problem but I prefer the slidedown and up  animation ...

Thanks in advance for any suggestions ...