菜单导航淡入淡出效果


$(document).ready(function () { 
   var x=$("#Menu .MenuContent");//菜单导航
   var y=$("#Menu .MenuImg");//控制类
       y.hover(function(){    
   x.fadeIn(1000);},           
  function(){x.fadeOut(1000);} 
);
 });
}); <div id="Menu">
            <div class="MenuImg">
                <img id="imgContronl" src="images/menu_arrow_20.gif" alt="" />
             </div>            <div class="MenuContent">
                <ul>
                    <li><a href="index.html">首页</a><span class="spanClass">|</span></li>
                    <li><a href="#">隆唐品牌</a><span class="spanClass">|</span></li>
                      .........
                </ul>
                       </div>
        </div>
现在我想实现一个效果：
1.当鼠标放在一个图片上时，出现一个淡入淡出的菜单导航
2.这个淡入淡出的导航菜单下有子菜单，也是淡入淡出的效果。。可以这样控制：
1.当鼠标从子菜单移走后，所有菜单都淡淡的隐藏
2.当鼠标放到这张图片时，导航菜单淡入淡出，并且是在没有经过子菜单的情况下问题：
1.当出现菜单导航时，怎么控制其淡入淡出？因为有时鼠标还没有移到菜单导航中的子菜单时，就隐藏了
用代码如何来控制
2.在ie6下用jquery fadeIn .fadeOut不兼容