jquery通过动画和位置绝对移动第二个导航

Question

我将在jquery动画中显示第二个Navi绝对位置 - 就像这个演示：

$('ul.level0 li').hover(function() {
  var cat = '#new-' + this.id;
  $(cat).animate({'left': '+100px'},'slow');
}, function() {
  var cat = '#new-' + this.id;
  $(cat).animate({'left': '-100px'},'slow');
});

.alles-zwei {
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}

ul.level0 {
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  background:#fff;
  width:100px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<ul class="level0">
<li class="level1" id="cat2441">Text</li>
<li class="level1" id="cat2450">Text</li>
<li class="level1" id="cat2455">Text</li>
</ul>

<div class="alles-zwei" id="new-cat2441">
  <ul class="level1">
    <li class="level2">Text</li>
    <li class="level3">Text</li>
    <li class="level2">Text</li>
  </ul>
</div>
<div class="alles-zwei" id="new-cat2450">
  <ul class="level1">
    <li class="level2">Text</li>
    <li class="level3">Text</li>
    <li class="level2">Text</li>
  </ul>
</div>
<div class="alles-zwei" id="new-cat2455">
  <ul class="level1">
    <li class="level2">Text</li>
    <li class="level3">Text</li>
    <li class="level2">Text</li>
  </ul>
</div>

但是当我转向第二个导航 - 第二个导航消失 - 没有可能到达那里 - 我怎么能做到最好？