版主：帮忙。我把这个代码调入模块（自定义）是横向菜单，引用后... [复制链接]

<p>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><script type="text/javascript" src="e/js/jquery-1.7.2.min.js"></script><style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{backgroundcdcdcd;font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-table}
*html .clearfix{height:1%}
.clearfix{display:block}
*+html .clearfix{min-height:1%}
/* nav_menu */
.nav_menu{height:42px;background074C52;}
.nav{width:100%;height:41px;position:relative;margin:0 auto;}
.nav .list li{float:left;}
.nav .list a{float:left;display:block;width:125px;height:42px;text-align:center;font:bold 13px/36px "微软雅黑";color000;}
.nav .list a:hover{colorFFA304;}
.nav .list a:hover,.nav .list .now{colorF00;backgroundfff;}
.nav .box{position:absolute;left:-5px;top:42px;width:auto;backgroundFFF;overflow:hidden;height:0;filter:alpha(opacity=0);opacity:0;border-bottom:2px solid #074c52;}
.nav .cont{position:relative;padding:25px 0 0px 24px;}
/* sublist */
.sublist li{float:left;width:168px;padding-right:24px;padding-bottom:24px;}
.sublist li h3.mcate-item-hd{font-family:'微软雅黑';padding-left:2px;font-size:14px;height:26px;line-height:26px;border-bottom:1px dashed #666666;}
.sublist li p.mcate-item-bd{padding-left:2px;}
.sublist li p.mcate-item-bd a{height:26px;line-height:26px;margin-right:5px;font-size:12px;color666666;text-decoration:none;display:inline-block;}
.sublist li p.mcate-item-bd a:hover{color6c5143;text-decoration:underline;}</style></p>
<div class="nav_menu">
<div class="nav">
<div id="navlist" class="list">
<ul id="navfouce">
    <li><a href="http://www.lanrenzhijia.com/">公司概况</a></li>
    <li><a href="http://www.lanrenzhijia.com/">产品展示</a></li>
    <li><a href="http://www.lanrenzhijia.com/">新闻动态</a></li>
    <li><a href="http://www.lanrenzhijia.com/">营销网络</a></li>
    <li><a href="http://www.lanrenzhijia.com/">照明知识</a></li>
    <li><a href="http://www.lanrenzhijia.com/">人力资源</a></li>
    <li><a href="http://www.lanrenzhijia.com/">客服中心</a></li>
    <li><a href="http://www.lanrenzhijia.com/">联系我们</a></li>
</ul>
</div>
<div id="navbox" class="box" style="height: 0px; overflow: hidden; opacity: 0">
<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="http://www.lanrenzhijia.com">女装</a> <a href="http://www.lanrenzhijia.com">男装</a> <a href="http://www.lanrenzhijia.com">内衣</a> <a href="http://www.lanrenzhijia.com">家居服</a> <a href="http://www.lanrenzhijia.com">配件</a> <a href="http://www.lanrenzhijia.com">羽绒</a> <a href="http://www.lanrenzhijia.com">呢大衣</a> <a href="http://www.lanrenzhijia.com">毛衣</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">女鞋</a> <a href="http://www.lanrenzhijia.com">男鞋</a> <a href="http://www.lanrenzhijia.com">箱包</a> <a href="http://www.lanrenzhijia.com">女包</a> <a href="http://www.lanrenzhijia.com">男包</a> <a href="http://www.lanrenzhijia.com">旅行箱</a> <a href="http://www.lanrenzhijia.com">钱包 </a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">饰品</a> <a href="http://www.lanrenzhijia.com">项链</a> <a href="http://www.lanrenzhijia.com">珠宝</a> <a href="http://www.lanrenzhijia.com">钻石</a> <a href="http://www.lanrenzhijia.com">手表</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>化妆品</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">护肤</a> <a href="http://www.lanrenzhijia.com">彩妆</a> <a href="http://www.lanrenzhijia.com">香水</a> <a href="http://www.lanrenzhijia.com">男士</a> <a href="http://www.lanrenzhijia.com">精油</a> <a href="http://www.lanrenzhijia.com">假发</a> <a href="http://www.lanrenzhijia.com">美体</a> <a href="http://www.lanrenzhijia.com">试用服务</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>运动 户外</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">运动鞋</a> <a href="http://www.lanrenzhijia.com">运动服</a> <a href="http://www.lanrenzhijia.com">运动用品</a> <a href="http://www.lanrenzhijia.com">户外</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>手机 数码</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">手机</a> <a href="http://www.lanrenzhijia.com">笔记本</a> <a href="http://www.lanrenzhijia.com">相机</a> <a href="http://www.lanrenzhijia.com">平板电脑</a> <a href="http://www.lanrenzhijia.com">配件</a> <a href="http://www.lanrenzhijia.com">电脑硬件</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>家用电器</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">大家电</a> <a href="http://www.lanrenzhijia.com">影音电器</a> <a href="http://www.lanrenzhijia.com">生活电器</a> <a href="http://www.lanrenzhijia.com">厨房电器</a> <a href="http://www.lanrenzhijia.com">健康护理</a> <a href="http://www.lanrenzhijia.com">剃须刀</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>家具 建材</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">家具</a> <a href="http://www.lanrenzhijia.com">卫浴</a> <a href="http://www.lanrenzhijia.com">地板</a> <a href="http://www.lanrenzhijia.com">灯具</a> <a href="http://www.lanrenzhijia.com">五金</a> <a href="http://www.lanrenzhijia.com">开关</a> <a href="http://www.lanrenzhijia.com">装修设计</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>家纺 居家</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">家纺</a> <a href="http://www.lanrenzhijia.com">磨毛套件</a> <a href="http://www.lanrenzhijia.com">羽绒被</a> <a href="http://www.lanrenzhijia.com">枕头</a> <a href="http://www.lanrenzhijia.com">软饰</a> <a href="http://www.lanrenzhijia.com">居家</a> <a href="http://www.lanrenzhijia.com">厨房</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>食品</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">零食</a> <a href="http://www.lanrenzhijia.com">进口</a> <a href="http://www.lanrenzhijia.com">茶叶</a> <a href="http://www.lanrenzhijia.com">冲饮</a> <a href="http://www.lanrenzhijia.com">酒水</a> <a href="http://www.lanrenzhijia.com">粮油</a> <a href="http://www.lanrenzhijia.com">干货</a> <a href="http://www.lanrenzhijia.com">生鲜</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>医药保健</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">保健</a> <a href="http://www.lanrenzhijia.com">滋补</a> <a href="http://www.lanrenzhijia.com">蛋白粉</a> <a href="http://www.lanrenzhijia.com">阿胶</a> <a href="http://www.lanrenzhijia.com">药品</a> <a href="http://www.lanrenzhijia.com">血压仪</a> <a href="http://www.lanrenzhijia.com">计生</a> <a href="http://www.lanrenzhijia.com">体检</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>母婴用品</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">玩具</a> <a href="http://www.lanrenzhijia.com">宝宝食品</a> <a href="http://www.lanrenzhijia.com">用品</a> <a href="http://www.lanrenzhijia.com">童装</a> <a href="http://www.lanrenzhijia.com">孕装</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>汽车 配件</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">新车</a> <a href="http://www.lanrenzhijia.com">座垫</a> <a href="http://www.lanrenzhijia.com">脚垫</a> <a href="http://www.lanrenzhijia.com">GPS</a> <a href="http://www.lanrenzhijia.com">车衣</a> <a href="http://www.lanrenzhijia.com">洗车机</a> <a href="http://www.lanrenzhijia.com">水枪</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>文化 玩乐</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">电子凭证</a> <a href="http://www.lanrenzhijia.com">图书</a> <a href="http://www.lanrenzhijia.com">乐器</a> <a href="http://www.lanrenzhijia.com">旅游</a> <a href="http://www.lanrenzhijia.com">鲜花</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="http://www.lanrenzhijia.com">女装</a> <a href="http://www.lanrenzhijia.com">男装</a> <a href="http://www.lanrenzhijia.com">内衣</a> <a href="http://www.lanrenzhijia.com">家居服</a> <a href="http://www.lanrenzhijia.com">配件</a> <a href="http://www.lanrenzhijia.com">羽绒</a> <a href="http://www.lanrenzhijia.com">呢大衣</a> <a href="http://www.lanrenzhijia.com">毛衣</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">女鞋</a> <a href="http://www.lanrenzhijia.com">男鞋</a> <a href="http://www.lanrenzhijia.com">箱包</a> <a href="http://www.lanrenzhijia.com">女包</a> <a href="http://www.lanrenzhijia.com">男包</a> <a href="http://www.lanrenzhijia.com">旅行箱</a> <a href="http://www.lanrenzhijia.com">钱包 </a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">饰品</a> <a href="http://www.lanrenzhijia.com">项链</a> <a href="http://www.lanrenzhijia.com">珠宝</a> <a href="http://www.lanrenzhijia.com">钻石</a> <a href="http://www.lanrenzhijia.com">手表</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>化妆品</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">护肤</a> <a href="http://www.lanrenzhijia.com">彩妆</a> <a href="http://www.lanrenzhijia.com">香水</a> <a href="http://www.lanrenzhijia.com">男士</a> <a href="http://www.lanrenzhijia.com">精油</a> <a href="http://www.lanrenzhijia.com">假发</a> <a href="http://www.lanrenzhijia.com">美体</a> <a href="http://www.lanrenzhijia.com">试用服务</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>运动 户外</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">运动鞋</a> <a href="http://www.lanrenzhijia.com">运动服</a> <a href="http://www.lanrenzhijia.com">运动用品</a> <a href="http://www.lanrenzhijia.com">户外</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>手机 数码</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">手机</a> <a href="http://www.lanrenzhijia.com">笔记本</a> <a href="http://www.lanrenzhijia.com">相机</a> <a href="http://www.lanrenzhijia.com">平板电脑</a> <a href="http://www.lanrenzhijia.com">配件</a> <a href="http://www.lanrenzhijia.com">电脑硬件</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>家用电器</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">大家电</a> <a href="http://www.lanrenzhijia.com">影音电器</a> <a href="http://www.lanrenzhijia.com">生活电器</a> <a href="http://www.lanrenzhijia.com">厨房电器</a> <a href="http://www.lanrenzhijia.com">健康护理</a> <a href="http://www.lanrenzhijia.com">剃须刀</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>家具 建材</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">家具</a> <a href="http://www.lanrenzhijia.com">卫浴</a> <a href="http://www.lanrenzhijia.com">地板</a> <a href="http://www.lanrenzhijia.com">灯具</a> <a href="http://www.lanrenzhijia.com">五金</a> <a href="http://www.lanrenzhijia.com">开关</a> <a href="http://www.lanrenzhijia.com">装修设计</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>家纺 居家</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">家纺</a> <a href="http://www.lanrenzhijia.com">磨毛套件</a> <a href="http://www.lanrenzhijia.com">羽绒被</a> <a href="http://www.lanrenzhijia.com">枕头</a> <a href="http://www.lanrenzhijia.com">软饰</a> <a href="http://www.lanrenzhijia.com">居家</a> <a href="http://www.lanrenzhijia.com">厨房</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>食品</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">零食</a> <a href="http://www.lanrenzhijia.com">进口</a> <a href="http://www.lanrenzhijia.com">茶叶</a> <a href="http://www.lanrenzhijia.com">冲饮</a> <a href="http://www.lanrenzhijia.com">酒水</a> <a href="http://www.lanrenzhijia.com">粮油</a> <a href="http://www.lanrenzhijia.com">干货</a> <a href="http://www.lanrenzhijia.com">生鲜</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="http://www.lanrenzhijia.com">女装</a> <a href="http://www.lanrenzhijia.com">男装</a> <a href="http://www.lanrenzhijia.com">内衣</a> <a href="http://www.lanrenzhijia.com">家居服</a> <a href="http://www.lanrenzhijia.com">配件</a> <a href="http://www.lanrenzhijia.com">羽绒</a> <a href="http://www.lanrenzhijia.com">呢大衣</a> <a href="http://www.lanrenzhijia.com">毛衣</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">女鞋</a> <a href="http://www.lanrenzhijia.com">男鞋</a> <a href="http://www.lanrenzhijia.com">箱包</a> <a href="http://www.lanrenzhijia.com">女包</a> <a href="http://www.lanrenzhijia.com">男包</a> <a href="http://www.lanrenzhijia.com">旅行箱</a> <a href="http://www.lanrenzhijia.com">钱包 </a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">饰品</a> <a href="http://www.lanrenzhijia.com">项链</a> <a href="http://www.lanrenzhijia.com">珠宝</a> <a href="http://www.lanrenzhijia.com">钻石</a> <a href="http://www.lanrenzhijia.com">手表</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>化妆品</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">护肤</a> <a href="http://www.lanrenzhijia.com">彩妆</a> <a href="http://www.lanrenzhijia.com">香水</a> <a href="http://www.lanrenzhijia.com">男士</a> <a href="http://www.lanrenzhijia.com">精油</a> <a href="http://www.lanrenzhijia.com">假发</a> <a href="http://www.lanrenzhijia.com">美体</a> <a href="http://www.lanrenzhijia.com">试用服务</a></p>
    </li>
    <li>
    <h3 class="mcate-item-hd"><span>运动 户外</span></h3>
    <p class="mcate-item-bd"><a href="http://www.lanrenzhijia.com">运动鞋</a> <a href="http://www.lanrenzhijia.com">运动服</a> <a href="http://www.lanrenzhijia.com">运动用品</a> <a href="http://www.lanrenzhijia.com">户外</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>
</div>
<script type="text/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");
    });

})();
</script>