js实现导航菜单效果

<script type="text/javascript">
	$(document).ready(function(){
		var temp;
		var nva_popitems = $(".nva ul li .nva_pop").hover(function(){
			if(temp){window.clearTimeout(temp);}
			var _self = $(this);
			var _index = nva_popitems.index(_self);
			nva_popitems.hide();
			nva_baritems.removeClass("hover");
			nva_baritems.eq(_index).addClass("hover");
			_self.show();
		},function(){
			temp = window.setTimeout(function(){
				nva_popitems.hide();
				nva_baritems.removeClass("hover");
			},100);
		});
		var nva_baritems = $(".nva ul li .nva_bar").hover(function(){
			if(temp){window.clearTimeout(temp);}
			var _self = $(this);
			var _index = nva_baritems.index(_self);
			nva_baritems.removeClass("hover");
			_self.addClass("hover");
			nva_popitems.hide();
			nva_popitems.eq(_index).show();
		},function(){
			temp = window.setTimeout(function(){
				nva_popitems.hide();
				nva_baritems.removeClass("hover");
			},100);
		});
		
});
</script>
<div class="nva">
        	<ul>
            	<li><a href="#" class="nva_bar">产品与服务</a>
                	<div class="nva_pop" style="display:none;">
                    	<dl>
                        	<dd><a href="#">注册与变更</a>
                            	<span class="son_pop">
                                	<i><a href="#" class="none">社保公积金办理</a></i>
                                    <i><a href="#" class="none">企业VI设计</a></i>
                                    <i><a href="#" class="none">法律服务</a></i>
                                    <i><a href="#" class="none">高新软件企业申请</a></i>
                                </span>
                            </dd>
                            <dd><a href="#">记账与报税</a></dd>
                            <dd><a href="#" class="none">商标专利版权</a></dd>
                            <dd style="border-bottom:none;"><a href="#"  class="none">高新软件企业申请</a></dd>
                        </dl>
                    </div>
                </li>
                <li><a href="#" class="nva_bar">管家服务</a>
                	<div class="nva_pop" style="display:none;">
                    	<dl>
                        	<dd><a href="#">注册与变更</a>
                            	<span class="son_pop">
                                	<i><a href="#" class="none">社保公积金办理</a></i>
                                    <i><a href="#" class="none">企业VI设计</a></i>
                                    <i><a href="#" class="none">法律服务</a></i>
                                    <i><a href="#" class="none">高新软件企业申请</a></i>
                                </span>
                            </dd>
                            <dd><a href="#">记账与报税</a></dd>
                            <dd><a href="#" class="none">商标专利版权</a></dd>
                            <dd style="border-bottom:none;"><a href="#"  class="none">高新软件企业申请</a></dd>
                        </dl>
                    </div>
                </li>
                <li style="background:none;"><a href="#" class="nva_bar">创业与经营</a>
                	<div class="nva_pop" style="display:none;">
                    	<dl>
                        	<dd><a href="#">注册与变更</a>
                            	<span class="son_pop">
                                	<i><a href="#" class="none">社保公积金办理</a></i>
                                    <i><a href="#" class="none">企业VI设计</a></i>
                                    <i><a href="#" class="none">法律服务</a></i>
                                    <i><a href="#" class="none">高新软件企业申请</a></i>
                                </span>
                            </dd>
                            <dd><a href="#">记账与报税</a></dd>
                            <dd><a href="#" class="none">商标专利版权</a></dd>
                            <dd style="border-bottom:none;"><a href="#"  class="none">高新软件企业申请</a></dd>
                        </dl>
                    </div>
                </li>
            </ul>
        </div>