<!--一级导航-->
<ul class='menu'>
<li class='menu-lei'>
<!--二级菜单-->
<ul class='menu-sub'>
<li class='menu-sub-cnt' name='b'></li>
<li class='menu-sub-cnt' name='b'></li>
...
</ul>
</li>
<li class='menu-lei'>
<!--二级菜单-->
<ul class='menu-sub'>
<li class='menu-sub-cnt' name='b'></li>
<li class='menu-sub-cnt' name='b'></li>
...
</ul>
</li>
...
</ul>
结果改成这样就行了，这样二级菜单在导航容器内，所以不会由于mouseout条件必须满足从二级菜单移出才会执行。
$(".menu_lei").each(function(){
$(this).mouseover(function(){
$(this).find(".menu-sub").show()
})
$(this).mouseout(function(){
$(this).find(".menu-sub").hide()
})
})
楼主写了这么多汗!你都知道用toggle了~~~我也不是很熟悉jquery。大致给你说下吧
$(function(){
$(".class").toggle(function(){
1，这个地方你把需要显示的DIV显示出来即可。
2，那个“加号”是图片的话，就换图片的url路径，是背景的话就换CSS
3,如果下面的DIV是只能一个一个显示的话，就用这个$(this).siblings(".div")
例如:
$(".one").show()
$(".image").attr("src","images/002.gif")
},function(){
此处再回到默认状态即可，很简单的。
})
})
很简单的一个效果，没必要写那么多代码。
用jquery实现吧，其实网上 有不少这种小控件！<div class="arrowlistmenu">
<h3 class="menuheader expandable">表单</h3>
<ul class="categoryitems">
<li><a href="1/">Horizontal CSS Menus</a></li>
<li><a href="2/">Vertical CSS Menus</a></li>
<li><a href="4/">Image CSS</a></li>
<li><a href="6/">Form CSS</a></li>
</ul>
<h3 class="menuheader expandable">菜单</h3>
<ul class="categoryitems">
<li><a href="">CSS Gallery</a></li>
<li><a href="">Menu Gallery</a></li>
<li><a href="">Web Design News</a></li>
<li><a href="">CSS Examples</a></li>
<li><a href="">CSS Compressor</a></li>
<li><a href="">CSS Forums</a></li>
</ul>
<h3 class="menuheader expandable">分页</h3>
<ul class="categoryitems">
<li><a href="#" >Free JavaScripts</a></li>
</ul>
</div>
