[jQuery] fadeIn/fadeOut problems

[jQuery] fadeIn/fadeOut problems


I'm creating a drop-down menu with jQuery. I made a basic version
which sets a sub-menu to display:block on mouseover and display:none
on mouseout. But when I change it to use fadeIn and fadeOut, things go
awry.
On the first mouseover the menu fades in and out twice. When moving
off the menu, it fades in and out repeatedly about 5 times! This
happens in Firefox, Opera and IE7. In IE6 the menu appears (no fade
effect) but does not disappear at all.
Here is the code:
JQUERY:
$(document).ready( function() {
    $("#main-menu ul.menu li")
        .mouseover( function() {
            //$(this).find("ul").css("display","block");
            $(this).find("ul").fadeIn("slow");
        })
        .mouseout( function() {
            //$(this).find("ul").css("display","none");
            $(this).find("ul").fadeOut("slow");
        });
});
The HTML is one unordered list for the top level, with each list item
having a list for the submenu.
What could be causing this problem?