Menu czteropoziomowe

Witam was, ktoś mi powie gdzie jaki tutaj mam błąd, jak go poprawić? Czwarty poziom wyświetla się od razu po najechaniu na pierwszy.

var txopen = false;
$('#menu').find('ul.clearfix').children('li').hover(function(){
      $(this).find('ul.sub-menu').stop().slideDown(150);
      $(this).find('ul.sub-menu').children('li').hover(function(){
          if (!txopen) {
              $(this).find('ul.sub-menu-b').stop().animate({widht: 'toggle'},150);
              txopen = true;
              $(this).find('ul.sub-menu-c').stop().animate({widht: 'toggle'},150);
              txopen = true;
          }
      }, function() {
          if (txopen) {
              $(this).find('ul.sub-menu-b').stop().animate({width: 'toggle'},100);
              txopen = false;
              $(this).find('ul.sub-menu-c').stop().animate({width: 'toggle'},100);
              txopen = false;
          }
      });
   }, function(){
      if (txopen) {
           $(this).find('ul.sub-menu-c').stop().animate({width: 'toggle'},100);
          $(this).find('ul.sub-menu-b').stop().animate({width: 'toggle'},100);
      }
      $(this).find('ul.sub-menu').stop().slideUp(100);
   });
    

   Pozdrawiam

Domyślam się gdzie jest błąd ale nie ma co zgadywać w ciemno. Wrzuć to do http://jsfiddle.net/ i pokaż całość.

Proszę bardzo: http://jsfiddle.net/rp8190oa/

Nikt nic nie wie jak to zrobić?