在很多电商网站的左上角都有一个产品目录的按钮。鼠标移动上去，显示一个下拉列表，这个下拉为一级分类。鼠标移动到一级分类上，会弹出二级分类的层；移动到不同的一级分类上，右边的二级分类也跟随变动。

当鼠标从整个层（包括一级分类和二级分类）上移走时，弹出的一级分类和二级分类消失。

相关代码如下：

<!--这里是控制显示的按钮-->
<div class="navJY">废弃物交易分类</div>

<!--下面是弹出的层-->
<div id="navJYBlock" class="navJYBlock cc">
<!--一级分类-->
<div class="navJYB_left fl">
<ul>
<volist name="itemlists" id="vo">
<li <if condition="$i eq 1">class="navJY_on"</if>>{$vo.fclassName}</li>
</volist>
</ul>
</div>
<!--二级分类-->
<div class="navJYB_right fl">
<volist name="itemlists" id="vo">
<if condition="$i eq 1">
<div class="navJYB_rShow navJYB_rSBlock">
<else/>
<div class="navJYB_rShow">
</if>

<div class="navJYB_r_Tit"><a href="{:U($itemurl,array('cateid'=>$vo['id']))}">{$vo.fclassName}</a></div>
<div class="navJYB_r_box">
<volist name="vo.subcate" id="vo1">
<a href="{:U($itemurl,array('cateid'=>$vo['id'],'cateid2'=>$vo1['id']))}">{$vo1.fclassName}</a>
</volist>
</div>
</div>
</volist>
<a class="navJYB_r_close" onclick="document.getElementById('navJYBlock').style.display='none'"></a>
</div>
</div>


相关的js代码：

// 控制一级分类的显示
//.navJY为按钮，navJYBlock为整个包含一级分类和二级分类的层
$(".navJY").hover(function(){
    $(".navJYBlock").css('display','block');
});
//点一级分类，显示二级分类
$(".navJYB_left li").hover(function(){
    var liindex=$(".navJYB_left li").index(this);
    $(this).addClass("navJY_on").siblings().removeClass("navJY_on");
    $(".navJYB_right .navJYB_rShow").eq(liindex).addClass("navJYB_rSBlock").siblings().removeClass("navJYB_rSBlock");
});
//鼠标从大的层上移走时，整个一级分类和二级分类均消失
$("#navJYBlock").mouseleave(function(){
    $("#navJYBlock").css('display','none');
});