fadeIn/fadeOut question

fadeIn/fadeOut question

Hiya to All,

I'm trying to apply a fadeIn/fadeOut effect on a menu. The fading works nicely; the problem is that I can't click on the submenu elements - as the submenu itself disappears as soon as the cursor is removed from over the parent li element.

  1.             $("#access ul li.parent ul").hide();
  2.               $("#access ul li.parent a").hover(function()
  3.               {
  4.                 $(this).next("#access ul li.parent ul").fadeIn(600);
  5.               },
  6.                function(){
  7.                 $(this).next("#access ul li.parent ul").fadeOut(600);
  8.               }

I know that it's the logical way: I hover over the parent <li> element, then the children <ul> fades out. To click on a <li> element in this submenu, I have to 'leave' the parent one - thus the submenu fades out.

I would need a function that
1. fades the submenu out after leaving the parent <li>, but
2. keep the same submenu displayed if and as long as the visitor hovers over it,
3. fades the submenu out after that the visitor leaves the submenu.

Thanks in advance for any kind of help.