以下是 美容医院多分类jquery导航js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>美容医院多分类jquery导航</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/zzsc.js"></script>
</head>
<body>
<div class="header_nav relative">
<div class="header_nav_subnav1">
<!-- daohang end -->
<div id="Z_TypeList" class="Z_TypeList">
<h1 class="title"><a href="#">鼠标放过来试试</a></h1>
<div class="Z_MenuList">
<ul class="Z_MenuList_ul">
<li class="list-item0 alt">
<h3><a href="#" target="_blank">整形美容</a></h3>
<p> <a href="#" target="_blank">眼部</a> <a href="#" target="_blank">鼻部</a> <a href="#" target="_blank">面部</a> <a href="#" target="_blank">胸部</a> <a href="#" target="_blank">吸脂</a> <a href="#" target="_blank">自体脂肪移植</a> <a href="#" target="_blank">耳部</a> <a href="#" target="_blank">私密整形</a> </p>
</li>
<li class="list-item1">
<h3><a href="#" target="_blank">皮肤美容</a></h3>
<p> <a href="#" target="_blank">祛斑</a> <a href="#" target="_blank">祛痘祛印</a> <a href="#" target="_blank">美白嫩肤</a> </p>
<p> <a href="#" target="_blank">除皱</a> <a href="#" target="_blank">紧肤</a> <a href="#" target="_blank">脱毛</a> <a href="#" target="_blank">除腋臭</a> </p>
</li>
<li class="list-item2 alt">
<h3><a href="#" target="_blank">注射美容</a></h3>
<p> <a href="#" target="_blank">除皱</a> <a href="#" target="_blank">填充</a> <a href="#" target="_blank">瘦脸</a> <a href="#" target="_blank">瘦腿</a></p>
<p><a href="#" target="_blank">手背美容</a> </p>
</li>
<li class="list-item3">
<h3><a href="#" target="_blank">口腔美容</a></h3>
<p> <a href="#" target="_blank">种植牙</a> <a href="#" target="_blank">烤瓷牙</a> <a href="#" target="_blank">牙齿美白</a> <a href="#" target="_blank">美容冠</a> <a href="#" target="_blank">牙齿矫正</a> <a href="#" target="_blank">补牙</a> </p>
</li>
<li class="list-item4 alt">
<h3><a href="#" target="_blank">毛发移植</a></h3>
<p> <a href="#" target="_blank">植发</a> <a href="#" target="_blank">植眉毛</a> <a href="#" target="_blank">植睫毛</a> <a href="#" target="_blank">植鬓角</a> <a href="#" target="_blank">植胡须</a> <a href="#" target="_blank">发际线</a> <a href="#" target="_blank">植美人尖</a> </p>
</li>
</ul>
</div>
<div class="Z_SubList">
<div class="subView">
<ul class="Z_SubList_ul">
<li class="subItem">
<h4 class="subItem-title"><a href="#" target="_blank">眼部整形</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">双眼皮</a> <a href="#" target="_blank">双眼皮修复术</a> <a href="#" target="_blank">祛眼袋</a> <a href="#" target="_blank">开外眼角</a> <a href="#" target="_blank">开内眼角</a> <a href="#" target="_blank">眼皮下垂</a> <a href="#" target="_blank">眼皮松弛</a> <a class="block1190 none980" href="/shangxiayanjianaoxian/" target="_blank">上下眼睑凹陷</a> <a class="block1190 none980" href="/web_htm/yuwei/" target="_blank">祛鱼尾纹</a> <a class="block1190 none980" href="/tms/" target="_blank">提眉</a> <a class="navgd" href="/web_htm/east_hans/" target="_blank">更多</a> </p>
<h4 class="subItem-title"><a href="#" target="_blank">鼻部整形</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">隆鼻术</a> <a href="#" target="_blank">假体隆鼻</a> <a href="#" target="_blank">膨体隆鼻</a> <a href="#" target="_blank">自体软骨隆鼻</a> <a href="#" target="_blank">注射隆鼻</a> <a href="#" target="_blank">鼻尖整形</a> <a href="#" target="_blank">鼻翼整形</a> <a class="block1190 none980" href="/web_htm/ygou/" target="_blank">鹰钩鼻整形</a> <a class="block1190 none980" href="/web_htm/tfen/" target="_blank">驼峰鼻整形</a> <a class="block1190 none980" href="/lbsbxf/" target="_blank">隆鼻失败修复</a> <a class="navgd" href="/web_htm/east_biz/" target="_blank">更多</a> </p>
<h4 class="subItem-title"><a href="#" target="_blank">面部整形</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">改脸型</a> <a href="#" target="_blank">下颌角整形</a> <a href="#" target="_blank">颧骨整形</a> <a href="#" target="_blank">下巴整形</a> <a href="#" target="_blank">咬肌肥大矫正</a> <a href="#" target="_blank">丰太阳穴</a> <a href="#" target="_blank">双下巴吸脂</a> <a class="block1190 none980" href="/fengmianjia/" target="_blank">丰面颊</a> <a class="block1190 none980" href="/ztzffet/" target="_blank">自体脂肪丰额头</a> <a class="block1190 none980" href="/mianbuchuzhou/" target="_blank">面部除皱</a> <a class="navgd" href="/web_htm/east_xe/" target="_blank">更多</a> </p>
<h4 class="subItem-title"><a href="#" target="_blank">乳房整形</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">假体隆胸</a> <a href="#" target="_blank">自体脂肪隆胸</a> <a href="#" target="_blank">丰胸方法</a> <a href="#" target="_blank">乳房下垂上提</a> <a href="#" target="_blank">乳头内陷矫正</a> <a href="#" target="_blank">不良隆胸修复</a> <a class="block1190 none980" href="/web_htm/suo/" target="_blank">巨型乳房缩小</a> <a class="block1190 none980" href="/furuquchu/" target="_blank">副乳祛除</a> <a class="block1190 none980" href="/web_htm/xuan/" target="_blank">乳晕炫色</a> <a class="navgd" href="/web_htm/east_rufa/" target="_blank">更多</a> </p>
<h4 class="subItem-title"><a href="#" target="_blank">吸脂塑身</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">腰部吸脂</a> <a href="#" target="_blank">胸部吸脂</a> <a href="#" target="_blank">腹部吸脂</a> <a href="#" target="_blank">脸部吸脂</a> <a href="#" target="_blank">手臂吸脂</a> <a href="#" target="_blank">大腿吸脂</a> <a href="#" target="_blank">小腿吸脂</a> <a href="#" target="_blank">臀部吸脂</a> <a class="block1190 none980" href="/web_htm/bei/" target="_blank">背部吸脂</a> <a class="block1190 none980" href="/chxz/" target="_blank">产后吸脂</a> <a class="navgd" href="/web_htm/east_xizi/" target="_blank">更多</a> </p>
<h4 class="subItem-title"><a href="#" target="_blank">自体脂肪移植</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">自体脂肪除皱</a> <a href="#" target="_blank">自体脂肪丰臀</a> <a href="#" target="_blank">O型腿矫正</a> <a href="#" target="_blank">自体脂肪隆胸</a> <a href="#" target="_blank">自体脂肪丰额头</a> <a class="block1190 none980" href="/zhifanglongbi/" target="_blank">自体脂肪隆鼻</a> <a class="block1190 none980" href="/taiyangxue/" target="_blank">自体脂肪丰太阳穴</a> <a class="navgd" href="/zitizhifang/" target="_blank">更多</a> </p>
<h4 class="subItem-title"><a href="#" target="_blank">耳部整形</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">外耳畸形</a> <a href="#" target="_blank">耳垂畸形矫正</a> <a href="#" target="_blank">耳廓缺损修复</a> <a href="#" target="_blank">耳再造术</a> <a href="#" target="_blank">耳整形术</a> <a class="navgd" href="/erbuzhengxing/" target="_blank">更多</a> </p>
<h4 class="subItem-title"><a href="#" target="_blank">私密整形</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">处女膜修复</a> <a href="#" target="_blank">阴道紧缩术</a> <a href="#" target="_blank">阴唇肥大整形</a> <a href="#" target="_blank">外阴整形术</a> <a href="#" target="_blank">阴蒂整形</a> <a href="#" target="_blank">阴道再造术</a> <a class="block1190 none980" href="/yinjingyanchang/" target="_blank">阴茎延长</a> <a class="navgd" href="/web_htm/east_szhi/" target="_blank">更多</a> </p>
</li>
</ul>
<dl class="dlbanner_zdy">
<dt class="titlemb">热门项目</dt>
<dd>
<div class="object_banner1">
<ul>
<li><a href="#" target="_blank"><img src="img/idnex_syp.jpg" width="212" height="354"></a></li>
</ul>
</div>
</dd>
</dl>
</div>
<div class="subView">
<ul class="Z_SubList_ul">
<li class="subItem" >
<h4 class="subItem-title"><a href="#" target="_blank">美白嫩肤</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">光子嫩肤</a> <a href="#" target="_blank">美白疗法</a> <a href="#" target="_blank">白瓷娃娃</a> <a href="#" target="_blank">黑脸娃娃</a> <a href="#" target="_blank">皮肤暗沉</a> <a href="#" target="_blank">微针美塑</a> <a href="#" target="_blank">皮肤粗糙</a> <a href="#" target="_blank">毛孔粗大</a> <a class="block1190 none980" href="/web_htm/othery/" target="_blank">黑眼圈</a> <a class="block1190 none980" href="/quheitou/" target="_blank">黑头清理</a> <a class="none1190 block2980 navgd" href="/web_htm/east_caig/" target="_blank">更多</a> </p>
<h4 class="subItem-title"><a href="#" target="_blank">紧肤提升</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">眼部松弛</a> <a href="#" target="_blank">颈部松弛</a> <a href="#" target="_blank">面颈部松弛</a> <a href="#" target="_blank">下面部松弛</a> <a href="#" target="_blank">双下巴</a> <a href="#" target="_blank">腰腹部松弛</a> <a href="#" target="_blank">四肢松弛</a> <a href="#" target="_blank">皮肤松弛</a> </p>
<h4 class="subItem-title"><a href="#" target="_blank">冰点脱毛</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">发际线修整</a> <a href="#" target="_blank">冰点专家脱毛</a> <a href="#" target="_blank">腋毛</a> <a href="#" target="_blank">唇毛</a> <a href="#" target="_blank">腿毛</a> <a href="#" target="_blank">手臂毛</a> <a href="#" target="_blank">比基尼毛</a> <a href="#" target="_blank">男士脱毛</a> </p>
<h4 class="subItem-title"><a href="#" target="_blank">祛斑</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">黄褐斑</a> <a href="#" target="_blank">雀斑</a> <a href="#" target="_blank">疤痕</a> <a href="#" target="_blank">胎记</a> <a href="#" target="_blank">妊娠斑</a> <a href="#" target="_blank">晒斑</a> <a href="#" target="_blank">老年斑</a> <a href="#" target="_blank">汗斑</a> <a href="#" target="_blank">祛痣</a> <a href="#" target="_blank">太田痣</a> </p>
<h4 class="subItem-title"><a href="#" target="_blank">射频除皱</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">面部除皱</a> <a href="#" target="_blank">肥胖纹</a> <a href="#" target="_blank">鱼尾纹</a> <a href="#" target="_blank">妊娠纹</a> <a href="#" target="_blank">抬头纹</a> <a href="#" target="_blank">法令纹</a> <a href="#" target="_blank">泪沟纹</a> <a href="#" target="_blank">颈纹</a> </p>
<h4 class="subItem-title"><a href="#" target="_blank">祛痘祛印</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">青春痘</a> <a href="#" target="_blank">痘疤</a> <a href="#" target="_blank">痘印</a> <a href="#" target="_blank">痘坑</a> </p>
<h4 class="subItem-title"><a href="#" target="_blank">血管性症状</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">鲜红斑痣</a> <a href="#" target="_blank">血管瘤</a> <a href="#" target="_blank">祛红血丝</a> </p>
<h4 class="subItem-title"><a href="#" target="_blank">祛腋臭</a></h4>
<p class="subItem-cat"> </p>
<h4 class="subItem-title"><a href="#" target="_blank">中医减肥</a></h4>
<p class="subItem-cat"> </p>
<div class="subItemimg1"> <a href="#" target="_blank"> <img src="img/subItemimg2.jpg" width="289" height="259"> </a> </div>
</li>
</ul>
<dl class="dlbanner_zdy">
<dt class="titlemb">热门项目</dt>
<dd>
<div class="object_banner2">
<ul>
<li><a href="#" target="_blank"><img src="img/idnex_nf.jpg" width="212" height="354"></a></li>
</ul>
</div>
</dd>
</dl>
</div>
<div class="subView">
<ul class="Z_SubList_ul">
<li class="subItem">
<div class="nav50">
<h4 class="subItem-title"><a href="#" target="_blank">面部填充</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">丰额头</a> <a href="#" target="_blank">丰苹果肌</a> <a href="#" target="_blank">丰眉弓</a> <a href="#" target="_blank">注射丰胸</a> <a href="#" target="_blank">丰耳垂</a> <a href="#" target="_blank">填充泪沟</a><br/>
<a href="#" target="_blank">丰唇</a> <a href="#" target="_blank">丰太阳穴</a> <a href="#" target="_blank">丰下巴</a> <a href="#" target="_blank">丰面颊</a> </p>
</div>
<div class="nav50">
<h4 class="subItem-title"><a href="#" target="_blank">注射除皱</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">嘴角纹</a> <a href="#" target="_blank">颈纹</a> <a href="#" target="_blank">眉川纹</a> <a href="#" target="_blank">鱼尾纹</a> <a href="#" target="_blank">抬头纹</a> <a href="#" target="_blank">法令纹</a> </p>
</div>
<div class="gclear"><!--如果有class="nav50"那么就使用--></div>
<div class="nav50">
<h4 class="subItem-title"><a href="#" target="_blank">注射材料</a></h4>
<p class="subItem-cat"> <a href="#" target="_blank">胶原蛋白</a> <a href="#" target="_blank">玻尿酸</a> <a href="#" target="_blank">BOTOX</a> </p>
</div>
<div class="nav50" style="width: 13%; margin: 0px 10px 0px 0px;">
<h4 class="subItem-title"><a href="#" target="_blank">注射瘦脸</a></h4>
<p class="subItem-cat"> </p>
</div>
<div class="nav50" style="width: 13%; margin: 0px 10px 0px 0px;">
<h4 class="subItem-title"><a href="#" target="_blank">注射瘦腿</a></h4>
<p class="subItem-cat"> </p>
</div>
<div class="nav50" style="width: 13%; margin: 0px 10px 0px 0px;">
<h4 class="subItem-title"><a href="#" target="_blank">手背美容</a></h4>
<p class="subItem-cat"> </p>
</div>
<div class="gclear"><!--如果有class="nav50"那么就使用--></div>
<div class="subItemimg2"> <a href="#" target="_blank">
<img src="img/subItemimg1980.jpg" width="500" height="231" class="none1190 block2980"></a>
</div>
</li>
</ul>
<dl>
<dt class="titlemb">热门项目</dt>
<dd>
<div class="object_banner3">
<ul>
<li><a href="#" target="_blank"><img src="img/idnex_owc.jpg" width="212" height="354"></a></li>
</ul>
</div>
</dd>
</dl>
</div>
<div class="subView">
<ul class="Z_SubList_ul">
<li class="subItem" id="subItemh4">
<h4 class="subItem-title"><a href="#" target="_blank">美容冠</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">种植牙</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">补牙</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">牙贴面</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">烤瓷牙</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">老年义齿</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">牙齿矫正</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">牙齿美白</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">牙齿修复</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">洗牙</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">牙周疾病</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">牙齿保健</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">其它口腔美容</a></h4>
<div class="subItemimg3"> <a href="#" target="_blank">
<img src="img/subItemimg3980.jpg" width="477" height="303" class="none1190 block2980">
</a>
</div>
</li>
</ul>
<dl>
<dt class="titlemb">热门项目</dt>
<dd>
<div class="object_banner4">
<ul>
<li><a href="#" target="_blank"><img src="img/idnex_ycjz.jpg" width="212" height="354"></a></li>
</ul>
</div>
</dd>
</dl>
</div>
<div class="subView">
<ul class="Z_SubList_ul">
<li class="subItem" id="subItemh4">
<h4 class="subItem-title"><a href="#" target="_blank">头发种植</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">眉毛种植</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">睫毛种植</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">胡须种植</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">鬓角种植</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">疤痕植发</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">发际线调整</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">美人尖种植</a></h4>
<h4 class="subItem-title"><a href="#" target="_blank">阴毛种植</a></h4>
<div class="subItemimg4"><a href="#" target="_blank">
<img src="img/subItemimg4980.jpg" width="516" height="265" class="none1190 block2980">
</a>
</div>
</li>
</ul>
<dl>
<dt class="titlemb">热门项目</dt>
<dd>
<div class="object_banner5">
<ul>
<li><a href="#" target="_blank"><img src="img/idnex_zfs.jpg" width="212" height="354"></a></li>
</ul>
</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- daohang end -->
<div class="header_nav_subnav2 mbox1">
<ul>
<li><a href="#">华美首页</a></li>
<li><a href="#" target="_blank">品牌中心</a></li>
<li><a href="#" target="_blank">华美公益</a></li>
<li><a href="#" target="_blank">专家团队</a></li>
<li><a href="#" target="_blank">塑美设备</a></li>
<li><a href="#" target="_blank">求美案例</a></li>
<li><a href="#" target="_blank">来院路线</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>JS代码(zzsc.js):
//������Ŀ����$(function(){
var bBtn = false;
var bW=false;
var navW=0;
$('#Z_TypeList').hover(function(){
$('.Z_MenuList').queue(function(next){
$(this).css({
'display':'block','overflow':'hidden'}
);
next();
}
).animate({
'height':'+=420px'}
,300,function(){
$('ul.Z_MenuList_ul>li').each(function(){
$(this).hover(function(){
$(this).queue(function(next){
var ins = $(this).index();
$(this).addClass('menuItemColor');
$('.subView').css({
'width':0,'display':'none'}
);
function toNavW(){
if (!bBtn){
if(parseInt($('header').width())>=1190){
bW=true;
}
else{
bW=false;
}
navW=bW?975:765;
$('.Z_SubList').addClass('box-shadow');
$('.Z_SubList').stop().css({
'display':'block'}
).animate({
'width':navW}
);
$('.subView').eq(ins).stop().css({
'display':'block'}
).animate({
'width':navW}
,function(){
bBtn = true;
}
);
}
else{
$('.subView').eq(ins).stop().css({
'display':'block'}
).animate({
'width':navW}
,0);
}
}
toNavW();
$(document).bind('ready',toNavW);
$(window).bind('resize',function(){
$(document).unbind('ready',toNavW);
$(document).bind('ready',toNavW);
}
);
next();
}
);
//$(this).find('h3,p a').css('color','#fff');
}
,function(){
$(this).removeClass('menuItemColor');
}
);
}
);
}
);
}
,function(){
$(this).queue(function(next){
bBtn = false;
$(this).find('.Z_MenuList').stop().css({
'height':0,'display':'none'}
);
$('.subView').css({
'width':0,'display':'none'}
);
$('.Z_SubList').removeClass('box-shadow');
$('.Z_SubList').css({
'width':0,'display':'none'}
);
$('ul.Z_MenuList_ul>li').each(function(){
$(this).removeClass('menuItemColor');
//$(this).find('h3').css('color','#000');
//$(this).find('p a').css('color','#888');
}
)next();
}
);
}
);
}
);
document.ondragstart=function (){
return false;
}
;
CSS代码(zzsc.css):
html,body,div,h1,h2,h3,h4,h5,h6,p,img,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,form,fieldset,embed,object,applet,header,nav,section,strong,footer,a img{border:0;margin:0;padding:0}
ul{list-style:none}
.gl{float:left}
.gr{float:right}
.gclear{clear:both;font-size:0;overflow:hidden;height:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}
[hidden]{display:none;}
body{background:url(../img/bodybg.png) 0 0 repeat-x #eaeaea;color:black;font:12px/1.5 "微软雅黑",arial,\5b8b\4f53}
a{text-decoration:none;color:black;}
a:visited{/*color:black*/
}
a:hover,a:active{color:#e4007f;text-decoration:none;outline:0;}
html{overflow-x:hidden}
/*公用类*/
.none980{display:none}
.block980{display:block}
.block2980{display:inline}
.header_nav_subnav2 a.none980{display:none}
.relative{position:relative}
.header_nav{height:45px;margin:110px auto 0;width:1000px;}
.header_nav_subnav1{width:197px;position:absolute;height:45px;}
.header_nav_subnav2{position:absolute;left:197px;height:45px;line-height:45px;}
.header_nav_subnav2 li{float:left;width:104px;background:url(../img/header_anv.png) right center no-repeat;height:45px;position:relative}
.header_nav_subnav2 .move_bg{margin-left:-1px;padding-left:1px;background:#6F082A;position:absolute;width:104px;height:45px;top:0;left:-20px}
.header_nav_subnav2 a{color:#FFF;font-size:16px;display:block;text-decoration:none;height:45px;position:absolute;width:104px;text-align:center}
.header_nav_subnav3{width:140px;position:absolute;right:2px;top:3px;height:41px;}
.header_nav_subnav3 a{background:url(../img/header_01.png) -44px -54px no-repeat;display:block;height:41px}
.header_nav_subnav3 a:hover{background-position:-44px -103px}
.Z_TypeList{width:197px;position:absolute;height:45px;z-index:99}
.Z_TypeList .title a{font-size:16px;color:#ffffff;background:url(../img/i_02.png) right center #3b001e no-repeat;height:45px;line-height:45px;text-align:center;display:block;padding-right:30px;text-decoration:none;font-weight:100;cursor:default}
.Z_TypeList .title a:hover{background:url(../img/i_05.png) right center #2a0015 no-repeat}
.Z_TypeList .Z_MenuList{width:200px;line-height:26px;position:absolute;left:0;top:45px;height:0;display:none;z-index:999;}
.Z_TypeList .Z_MenuList ul li{display:block;position:relative;padding-left:10px;background:#ffffff;border-bottom:1px solid #ffffff;padding-top:7px}
.Z_TypeList .Z_MenuList ul li.alt{background:#f0f0f0;}
.Z_TypeList .Z_MenuList ul li p{padding:0 5px 2px 0px;display:block;line-height:2;}
.Z_TypeList .Z_MenuList ul li p a{color:#414141;padding:0px 4px 0 0;white-space:nowrap;}
.Z_TypeList .Z_MenuList h3{padding-left:22px;font-size:14px;background:url(../img/inav.png) no-repeat;font-weight:100;display:block}
.Z_TypeList .list-item0 h3{background-position:0px 6px;}
.Z_TypeList .list-item1 h3{background-position:0px -29px;}
.Z_TypeList .list-item2 h3{background-position:0px -67px;}
.Z_TypeList .list-item3 h3{background-position:0px -107px;}
.Z_TypeList .list-item4 h3{background-position:0px -148px;}
.Z_TypeList .list-item5 h3{background-position:0px -150px;}
/* Z_SubList*/
.Z_SubList{position:absolute;height:398px;z-index:9;left:200px;top:45px;line-height:21px;overflow:hidden;width:0;display:none;}
.Z_SubList .subView{position:absolute;top:0;left:0;overflow:hidden;display:none;float:left;width:600px}
.box-shadow{padding:10px 10px 10px 0;border:1px solid #dfdfdf;-webkit-box-shadow:0px 0px 15px #888;-moz-box-shadow:0px 0px 15px #888;box-shadow:0px 0px 15px #888;background:#fafafa;z-index:999}
.Z_SubList_ul{width:530px;margin:0 0 15px 10px}
.Z_SubList .subItem{width:540px;height:420px;position:relative}
.nav50{float:left;width:50%}
.subItemimg1,.subItemimg2,.subItemimg3,.subItemimg4{position:absolute;bottom:0;font-size:0px;line-height:normal;font-size:0;}
.subItemimg1{right:0}
.subItemimg2{left:-10px}
.subItemimg3{left:2%}
.subItemimg4{left:1%}
#subItemh4 h4{display:inline-block;margin:10px 15px 0 22px;white-space:nowrap;width:60px;}
#subItemh4 h4 a{font-size:12px;color:#414141;padding:0 2px}
#subItemh4 h4 a:hover{background:#DFDFDF;}
.Z_SubList .subItem-hd{height:34px;line-height:34px;border-bottom:2px solid #a6937c;font-size:15px;font-family:"寰蒋闆呴粦";margin-bottom:6px;display:none;}
.Z_SubList .subItem-hd a{color:#000;}
.Z_SubList .subItem-title{font-weight:normal;font-size:14px;padding-left:5px;display:block;margin-top:8px;}
.Z_SubList .subItem-title a{color:#d9004b;}
.Z_SubList .subItem-cat{margin-left:10px;}
.Z_SubList .subItem-cat a{padding:2px;color:#414141;margin:0 2px;font-family:\5b8b\4f53;white-space:nowrap;overflow:hidden}
.Z_SubList .subItem-cat .navgd{border-radius:3px;border:1px solid #CCC;padding:2px 5px;}
.Z_SubList .subItem-cat a:hover{background:#dfdfdf;text-decoration:none;}
.Z_TypeList .Z_MenuList ul li.menuItemColor{background-color:#ccc;}
.Z_TypeList .Z_MenuList ul li a:hover{color:#e4007f}
.object_banner1,.object_banner2,.object_banner3,.object_banner4,.object_banner5{width:212px;height:368px;overflow:hidden}
.object_banner1 li,.object_banner2 li,.object_banner3 li,.object_banner4 li,.object_banner5 li{width:212px;height:368px;float:left;}
.object_banner1 .banner_index,.object_banner2 .banner_index,.object_banner3 .banner_index,.object_banner4 .banner_index,.object_banner5 .banner_index{bottom:0;top:337px;width:auto}
.object_banner1 .banner_index li,.object_banner2 .banner_index li,.object_banner3 .banner_index li,.object_banner4 .banner_index li,.object_banner5 .banner_index li{width:14px;height:14px;float:right;margin:0 7px}
.Z_TypeList dl{width:212px;float:right;position:relative;top:-430px;}
.Z_TypeList dl dt{font-size:14px;color:#414141;}
.Z_TypeList dl dd{margin-top:5px;}
.Z_TypeList dl.dlbanner_zdy{top:-438px}
分享到QQ
分享到微博
微信扫一扫
