Javascript JQuery悬停函数导致我的div隐藏

在my functions.js中，我有：

$(document).ready(function() {      
  $("#cat").hover(function() {
    $("#kiti").show();  
  })
  $("#kiti").mouseout(function() {
    $("#kiti").hide();      
  })                                 
})

Html文件：

<a id="cat" href="#">category</a>
<div id="kiti">
    <a href="#">sub1</a>
    <br /><a href="#">sub2</a>
</div>

为什么，当我在sub1上悬停时，sub1和sub2会隐藏？如果它是简单的文本，就可以了。我希望你明白我的问题

编辑：顺便说一下。有没有办法制作类似于

die（）的东西或
退出（）从javascript中的php停止执行？
$。hover（）
接受两个参数。如果只想使用第一个，请使用
$.mouseover（）

$(function(){
  $("a#cat").mouseover(function(){
    $("#kiti").show(); // shows <div id="kiti">...sub1...sub2...</div>
  });
  $("#kiti").mouseleave(function(){
    $(this).hide();    // hides <div id="kiti">...sub1...sub2...</div>
  });
});

$（函数（）{
$（“a#cat”）.mouseover（函数（）{
$（“#kiti”）.show（）；//显示…子1…子2。。。
});
$（“#kiti”）.mouseleave（函数（）{
$（this）.hide（）；//隐藏…sub1…sub2。。。
});
});
mouseout
是错误的事件-将鼠标悬停在子元素上时会触发该事件。

改用
mouseleave
：

$("#cat").mouseenter(function() {
    $("#kiti").show();  
});
$("#kiti").mouseleave(function() {
    $("#kiti").hide();      
});

请看这里：

这里的文档：
感谢Chris Farmer正确缩进jQuery代码。我也想这样做，但我不知道怎么做。Tomas-你想达到什么效果？当鼠标悬停在“猫”上时，你想显示“基蒂”，当鼠标从“基蒂”上滑出时，你想隐藏“基蒂”？这是一个嵌套的动态扩展菜单？没错，詹姆斯。我这样做了，但是当我把鼠标指针放在上面或者所有的sub都隐藏时，它应该只在我离开#kitii时才隐藏。可能值得注意的是，jQuery 1.4（仍然是Alpha）只支持将一个函数传递给
hover（）
。它仍然不起作用。当我把鼠标指针放在所有潜水艇上的时候。难以置信！终于开始工作了，非常感谢！顺便问一下，你能解释一下，mouseleave和mouseout的区别是什么吗？经常发生。下次你会找到我的：）谢谢。你们能告诉我，当我立即将鼠标指针从类别中移开时，我需要补充什么吗？