[jQuery] Make sub menu delay before disapper

Hi all!

So I have this simple sub menu with Jquery.

The problem is that the child menu is like 2px below the parent, so
when the submenu appears I have to be very fast to mouseover it or
else it will disapper.

The sub menu is absolute positioned and I can't change that right now.

So how can I make the sub menu, once activated, stay like 1 second
before disappearing?

Here's the code:
(#community is the id of the <li> with a second level <ul>)

                        $("#community").mouseover( function() {
                                        
$(this).children("ul").css("display","block").animate({opacity:
1.0}, 3000);
                                }).mouseout( function() {
                                        
$(this).children("ul").animate({opacity: 1.0}, 3000).css
("display","none");
                        });

Note that I tried to use the animate for this but with no success.

Any ideas? Please any help is appreciated.