[CyMKuH]

Есть меню навигации, каждый пункт - div, один из пунктов - должен быть выпадающим, когда наводишь на него под ним появляется div id=sub_navigation

Обработчики hover:

$(document).ready(function() {
  $("div.menu_items").hover (
    function () {
        if (id=='menu_3') {   
          $("div#sub_navigation").fadeIn(200);
        }
        $(this).find("div.m_background").fadeIn(200);

    }, 
    function () {
        if (id=='menu_3') {
          $("div#sub_navigation").fadeOut(200);
        }
        $(this).find("div.m_background").fadeOut(200);
      }
    } 
  );       

  $("div#sub_navigation").hover (
    function () {
      $(this).fadeIn(200);
      $("div#menu_3").find("div.m_background").fadeIn(200);
    },
    function () {
      $(this).fadeOut(200);
      $("div#menu_3").find("div.m_background").fadeOut(200);
    } 
  ); 
});

Проблема в том, что выпадающее меню и задний фон пункта основного меню появляются через fadeIn и когда я веду курсор от пункта основного меню к выпадающему, они сначала "затухают", а потом "появляются"... Если делать без fadeIn fadeOut - просто display: block, display: none - работает всё нормально... но нужно с анимацией... Подскажите пожалуйста решение.