Раскрывающийся список, состоящий из двух делений с timeOut

Question

Все,

Я использую следующий код для выпадающего меню:

HTML

  <div id="mainmenu">
    <div id="Raphael" class="menuitem">Menu 1</div>
    <div id="Contact" class="menuitem">Menu 2</div>
    <div id="Contact" class="menuitem">Menu 3</div>
  </div>
<div id="submenu">Submenu</div>

JAVASCRIPT:

  $(".menuitem").hover(
    function() {
      var timeout = $(this).data("timeout");
      console.log(timeout);
      if(timeout) clearTimeout(timeout);
      console.log(this);
      $("#submenu").slideDown('fast');
    },
    function() {
      console.log(this);
      $(this).data("timeout", setTimeout($.proxy(function() {
        $('#submenu').animate({top: '-4px'}, 200); 
      }, this), 500));
  });

  $(document).click(function() {
    $('#submenu:visible').hide();
  });

CSS(это будет обработано через пре-процессор CSS, это выглядит немного иначе!):

.menuitem
  position relative
  line-height 25px
  height 25px
  display table-cell
  float left
  z-index 2
  top 0px
  background white
  border 1px solid black
  border-left 0px
  vertical-align middle
  padding 0px
  padding-left 20px
  padding-right 20px
  margin 0px
  cursor pointer
  cursor hand

#submenu
    position absolute
    width 100px
    height 100px
    font-size 12px
    text-align center
    border 1px solid black
    left 10px
    margin-top 0%
    top -4px
    background white
    z-index 2

Код работает нормально, за исключением того, что когда я наведу курсор на подменю, он исчезнет, ​​хотя я ожидаю, что он тоже отобразитпока я не выхожу из подменю.Любые идеи, как я могу это исправить?

Спасибо