Mouseover表现得很奇怪

Question

我正在尝试仅在鼠标位于使用jQuery的父<li>元素上时才显示子菜单。

HTML：

<ul>
  <li class="item">Item 1
       <ul class="sub">
           <li>Sub 1</li>
           <li>Sub 2</li>
       </ul>
  </li>
    <li class="item">Item 1
       <ul class="sub">
          <li>Sub 1</li>
          <li>Sub 2</li>
  </ul>
  </li>
</ul>

CSS：

ul li ul{
  height: auto;
  display: none;
}

jquery：

$(".item").mouseover(function() {
    var originalHeight = $(this).find(".sub").height();
    $(this).find(".sub").css('height', '0');
    $(this).find(".sub").css('display', 'block');
    $(this).find(".sub").animate({
        height: originalHeight
    }, 1000, function() {});
});

$(".item").mouseout(function() {
    $(this).find(".sub").animate({
        height: '0'
    }, 1000, function() {});
    setTimeout(function() {
        $(this).find(".sub").css('display', 'none');
        $(this).find(".sub").css('height', originalHeight);
    }, 1000);
});

这是小提琴：https://jsfiddle.net/gtq9q5gL/

问题是：整个事情表现得很奇怪，我不知道为什么。有时即使鼠标外出，子菜单也会再次出现。