Проблема с сложным выпадающим меню, как решить?

Есть проект в нем сложное выпадающее меню (второй выпадающий блок по высоте выше в некоторых случаях чем первый, аналогично третий в некоторых случаях выше чем второй и т.д.), нужно поводить мышкой и все сразу станет ясно. Так вот в чем вопрос:

сейчас все как бы работает правильно, за исключением одного момента:

-если мы наводи скажем на Сухие смеси, открывается второй блок меню, все ок, но если сразу вернуться на Сухие смеси то второй блок выпадающий обрежется (поводите мышкой туда сюда и это четко видно) -далее переходим на второй блок пункт Штукатурки - все ок - но если мы вернемся на начальный первый блок - пункт Сухие смеси, то второй выпадающий блок укорачивается обрезая длинну под уровень первого блока выравнивание блоков я сделал с помощью вот такого скрипта

$('.parent').hover( 
  function() { 
 
    hchild = $(this).children('ul').outerHeight(true) + 4; 
    hparent = $(this).parents('.submenu').outerHeight(true); 
    if (hchild > hparent) { 
      $(this).parents('.submenu').css('height', hchild); 
      if (!$(this).parent("ul").is(".level-1")) { 
        $(this).parent("ul").css('height', hchild - 4); 
      } 
    } else { 
      if (hchild < hparent) { 
        $(this).children('ul').css('height', hparent - 4); 
 
 
      } 
 
    } 
 
  }, 
  function() { 
    $(this).parents('.submenu').removeAttr("style"); 
    $(this).children('ul').removeAttr("style"); 
    //$(this).parent("ul").removeAttr("style"); 
  });

и вот не могу понять где косяк, почему так происходит? Помогите разобраться. Спасибо.