jQuery弹出下拉导航菜单特效代码

使用方法：

引入css样式文件

<link type="text/css" href="css/style.css" rel="stylesheet" />

引入jQuery库文件

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

JavaScript结构

(function(){
	var time = null;
	var list = $("#navlist");
	var box = $("#navbox");
	var lista = list.find("a");
	
	for(var i=0,j=lista.length;i<j;i++){
		if(lista[i].className == "now"){
			var olda = i;
		}
	}
	
	var box_show = function(hei){
		box.stop().animate({
			height:hei,
			opacity:1
		},400);
	}
	
	var box_hide = function(){
		box.stop().animate({
			height:0,
			opacity:0
		},400);
	}
	
	lista.hover(function(){
		lista.removeClass("now");
		$(this).addClass("now");
		clearTimeout(time);
		var index = list.find("a").index($(this));
		box.find(".cont").hide().eq(index).show();
		var _height = box.find(".cont").eq(index).height()+54;
		box_show(_height)
	},function(){
		time = setTimeout(function(){	
			box.find(".cont").hide();
			box_hide();
		},50);
		lista.removeClass("now");
		lista.eq(olda).addClass("now");
	});
	
	box.find(".cont").hover(function(){
		var _index = box.find(".cont").index($(this));
		lista.removeClass("now");
		lista.eq(_index).addClass("now");
		clearTimeout(time);
		$(this).show();
		var _height = $(this).height()+54;
		box_show(_height);
	},function(){
		time = setTimeout(function(){		
			$(this).hide();
			box_hide();
		},50);
		lista.removeClass("now");
		lista.eq(olda).addClass("now");
	});
})();

HTML结构

<div class="nav">
    <div class="list" id="navlist">
        <ul id="navfouce">
            <li><a href="#/">公司概况</a></li>   
            <li><a href="#/">产品展示</a></li>   
            <li><a href="#/">新闻动态</a></li>
            <li><a href="#/">营销网络</a></li>
            <li><a href="#/">照明知识</a></li>   
            <li><a href="#/">人力资源</a></li>   
            <li><a href="#/">客服中心</a></li>   
            <li><a href="#/">联系我们</a></li>
        </ul>
    </div>
    
    <div class="box" id="navbox" style="height:0px;opacity:0;overflow:hidden;">
        <div class="cont" style="display:none;">
            <ul class="sublist clearfix">
                <li>
                    <h3 class="mcate-item-hd"><span>服饰内衣</span></h3>
                    <p class="mcate-item-bd">
                        <a href="#">女装</a>
                        <a href="#">男装</a>
                        <a href="#">内衣</a>
                        <a href="#">家居服</a>
                        <a href="#">配件</a>
                        <a href="#">羽绒</a>
                        <a href="#">呢大衣</a>
                        <a href="#">毛衣</a>
                    </p>
                </li>
                <li>
                    <h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
                    <p class="mcate-item-bd">
                        <a href="#">女鞋</a>
                        <a href="#">男鞋</a>
                        <a href="#">箱包</a>
                        <a href="#">女包</a>
                        <a href="#">男包</a>
                        <a href="#">旅行箱</a>
                        <a href="#">钱包 </a>
                    </p>
                </li>
                ……
            </ul>
        </div>
        <div class="cont" style="display:none;">
            <ul class="sublist clearfix">
                <li>
                    <h3 class="mcate-item-hd"><span>服饰内衣</span></h3>
                    <p class="mcate-item-bd">
                        <a href="#">女装</a>
                        <a href="#">男装</a>
                        <a href="#">内衣</a>
                        <a href="#">家居服</a>
                        <a href="#">配件</a>
                        <a href="#">羽绒</a>
                        <a href="#">呢大衣</a>
                        <a href="#">毛衣</a>
                    </p>
                </li>
                <li>
                    <h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
                    <p class="mcate-item-bd">
                        <a href="#">女鞋</a>
                        <a href="#">男鞋</a>
                        <a href="#">箱包</a>
                        <a href="#">女包</a>
                        <a href="#">男包</a>
                        <a href="#">旅行箱</a>
                        <a href="#">钱包 </a>
                    </p>
                </li>
                <li>
                    <h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
                    <p class="mcate-item-bd">
                        <a href="#">饰品</a>
                        <a href="#">项链</a>
                        <a href="#">珠宝</a>
                        <a href="#">钻石</a>
                        <a href="#">手表</a>
                    </p>
                </li>
                ……
            </ul>
        </div>
        <div class="cont" style="display:none;">
            <ul class="sublist clearfix">
                <li>
                    <h3 class="mcate-item-hd"><span>服饰内衣</span></h3>
                    <p class="mcate-item-bd">
                        <a href="#">女装</a>
                        <a href="#">男装</a>
                        <a href="#">内衣</a>
                        <a href="#">家居服</a>
                        <a href="#">配件</a>
                        <a href="#">羽绒</a>
                        <a href="#">呢大衣</a>
                        <a href="#">毛衣</a>
                    </p>
                </li>
                <li>
                    <h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
                    <p class="mcate-item-bd">
                        <a href="#">女鞋</a>
                        <a href="#">男鞋</a>
                        <a href="#">箱包</a>
                        <a href="#">女包</a>
                        <a href="#">男包</a>
                        <a href="#">旅行箱</a>
                        <a href="#">钱包 </a>
                    </p>
                </li>
                <li>
                    <h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
                    <p class="mcate-item-bd">
                        <a href="#">饰品</a>
                        <a href="#">项链</a>
                        <a href="#">珠宝</a>
                        <a href="#">钻石</a>
                        <a href="#">手表</a>
                    </p>
                </li>
                <li>
                    <h3 class="mcate-item-hd"><span>化妆品</span></h3>
                    <p class="mcate-item-bd">
                        <a href="#">护肤</a>
                        <a href="#">彩妆</a>
                        <a href="#">香水</a>
                        <a href="#">男士</a>
                        <a href="#">精油</a>
                        <a href="#">假发</a>
                        <a href="#">美体</a>
                        <a href="#">试用服务</a>
                    </p>
                </li>
                <li>
                    <h3 class="mcate-item-hd"><span>运动 户外</span></h3>
                    <p class="mcate-item-bd">
                        <a href="#">运动鞋</a>
                        <a href="#">运动服</a>
                        <a href="#">运动用品</a>
                        <a href="#">户外</a>
                    </p>
                </li>
            </ul>
        </div>
        <div class="cont" style="display:none;">3<br />3</div>
        <div class="cont" style="display:none;">4<br />3<br />4</div>
        <div class="cont" style="display:none;">5</div>
        <div class="cont" style="display:none;">6<br />3<br />3</div>
        <div class="cont" style="display:none;">7<br />3<br />3<br />3</div>
    </div>
</div>