jquery之二级导航栏中mouseleave与mouseout的应用

今天无聊写了个二级导航栏，发现了一个以前根本没注意的问题，那就是mouseleave的事件。故记录在此，菜鸟飘过。

二级导航栏的功能无非就是鼠标至于某标题上时，显示其若干子标题，离开某标题至于另外一标题时，显示对应的子标题并隐藏其他的子标题。还有，就是鼠标离开所有的标题或子标题时，应隐藏所有的子标题。

一开始便全用mouseover和mouseout事件处理，但发现鼠标离开所有的标题或子标题时，最后一次显示出的子标题没有被隐藏。body代码如下：

<ul class="ul_list">
  <li class="li_list">main</li>
</ul>
<ul class="ul_list">
  <li class="li_list">Autobots</li>
  <li class="sub_li">Optimus Prime</li>
  <li class="sub_li">Bumble Bee</li>
  <li class="sub_li">Ironhide</li>
  <li class="sub_li">Jazz</li>
</ul>
<ul class="ul_list">
  <li class="li_list">Decepticons</li>
  <li class="sub_li">Megatron</li>
  <li class="sub_li">Shockwave</li>
  <li class="sub_li">Soundwave</li>
  <li class="sub_li">Starscream</li>
</ul>

CSS如下：

.ul_list{
	width:200px;
	float:left;
	text-align:center;
	padding:0;
	position:relative;}
.li_list{
	list-style:none;
	text-align:center;
	background:#CCC;
	height:40px;
	line-height:40px;
	font-size:18px;
	font-family:黑体;
	color:#000000;
	cursor:pointer;
	position:relative;}
.sub_li{
	list-style:none;
	text-align:center;
	background:#CCC;
	height:40px;
	line-height:40px;
	font-size:18px;
	font-family:黑体;
	color:#000000;
	display:none;
	cursor:pointer;
	position:relative;}

JS如下：

$(document).ready(function(e) {
        $(".li_list").mouseover(function(){
			$(this).siblings(".sub_li").show("slow");
			$(this).parent(".ul_list").siblings(".ul_list").children(".sub_li").hide("slow");	
		});
		$(".ul_list").mouseout(function(){
			$(this).children(".sub_li").hide("slow");
		});
		$(".sub_li").mouseover(function(){
			$(this).css({"border-top":"1px #FFFFFF solid",
						"border-bottom":"1px #FFFFFF solid"});	
		});
		$(".sub_li").mouseout(function(){
			$(this).css("border", "none");	
		});
    });

试了一些方法也不行，后来把上述第二项的mouseout事件改为mouseleave则可以，查了资料，mouseout是不论鼠标指针离开被选元素或其子元素，都被触发；而mouseleave是只有在鼠标指针离开被选元素时，才触发。