以下是 jquery左侧商品分类导航特效代码 的示例演示效果:
部分效果截图:
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/common.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<!--start main-->
<div class="wrapper">
<div class="main">
<div class="maincontent">
<div class="topblock">
<div class="nav homenav" id="nav">
<div class="allcate"><a href="#">全部商品分类</a></div>
<ul>
<li> <a href="#?electronics-642/" >数码产品、配件</a>
<div class="submenubox disn">
<div class="subcate">
<ul>
<li><a href="#?electronics-642/category/digitalcamera-644/" >数码相机</a></li>
<li><a href="#?electronics-642/category/mp4player-647/" >MP4播放器</a></li>
<li><a href="#?electronics-642/category/pda-650/" >掌上电脑</a></li>
<li><a href="#?electronics-642/category/digidictionary-653/" >电子词典</a></li>
<li><a href="#?electronics-642/category/cardreader-665/" >读卡器</a></li>
<li><a href="#?electronics-642/category/pdaacc-683/" >PDA配件</a></li>
<li><a href="#?electronics-642/category/dcacc-684/" >数码配件</a></li>
</ul>
</div>
<div class="colright">
<div class="featuredbrand">
<h3>推荐品牌</h3>
<ul>
<li><a href="#?brand-canon-18-ch-642-c-0/" title="佳能" ><img src="http://www.jq-school.com/upload/hot_brandlogo/18.jpg" alt="佳能" /></a></li>
<li><a href="#?brand-sony-10-ch-642-c-0/" title="索尼" ><img src="http://www.jq-school.com/upload/hot_brandlogo/10.jpg" alt="索尼" /></a></li>
<li><a href="#?brand-aigo-20-ch-642-c-0/" title="爱国者" ><img src="http://www.jq-school.com/upload/hot_brandlogo/20.jpg" alt="爱国者" /></a></li>
<li><a href="#?brand-apple-87-ch-642-c-0/" title="苹果" ><img src="http://www.jq-school.com/upload/hot_brandlogo/18.jpg" alt="苹果" /></a></li>
<li><a href="#?brand-newsmy-114-ch-642-c-0/" title="纽曼" ><img src="http://www.jq-school.com/upload/hot_brandlogo/114.jpg" alt="纽曼" /></a></li>
<li><a href="#?brand-nikon-19-ch-642-c-0/" title="尼康" ><img src="http://www.jq-school.com/upload/hot_brandlogo/19.jpg" alt="尼康" /></a></li>
</ul>
<div class="cl"></div>
</div>
<div class="merchantpromotion">
<h3>推荐商家</h3>
<div class="txtList">
<ul>
<li><a href="#?icson-732/mcate-642-0/" title="易迅网">易迅网</a></li>
<li><a href="#?gomemall-545/mcate-642-0/" title="国美电器">国美电器</a></li>
<li><a href="#?suningshop-3505/mcate-642-0/" title="苏宁易购">苏宁易购</a></li>
<li><a href="#?zm7-85136/mcate-642-0/" title="卓美网">卓美网</a></li>
<li><a href="#?mmloo-13012/mcate-642-0/" title="米米乐">米米乐</a></li>
<li><a href="#?efeihu-83323/mcate-642-0/" title="飞虎乐购">飞虎乐购</a></li>
</ul>
</div>
<div class="cl"></div>
</div>
</div>
<div class="cl"></div>
</div>
</li>
<li> <a href="#?computers-553/" >电脑、硬件</a>
<div class="submenubox disn">
<div class="subcate">
<ul>
<li><a href="#?computers-553/category/laptop-600/" >笔记本</a></li>
<li><a href="#?computers-553/category/desktop-601/" >台式机</a></li>
<li><a href="#?computers-553/category/pda-781/" >平板电脑</a></li>
<li><a href="#?computers-553/category/netbook-731/" >上网本</a></li>
<li><a href="#?computers-553/category/display-604/" >显示器</a></li>
<li><a href="#?computers-553/category/stdcomponent-554/" >电脑配件</a></li>
<li><a href="#?computers-553/category/expandcomponent-588/" >外设产品</a></li>
<li><a href="#?computers-553/category/network-609/" >网络设备</a></li>
</ul>
</div>
<div class="colright">
<div class="featuredbrand">
<h3>推荐品牌</h3>
<ul>
<li><a href="#?brand-apple-87-ch-553-c-0/" title="苹果" ><img src="http://www.jq-school.com/upload/hot_brandlogo/18.jpg" alt="苹果" /></a></li>
<li><a href="#?brand-lenovo-1-ch-553-c-0/" title="联想" ><img src="http://www.jq-school.com/upload/hot_brandlogo/1.jpg" alt="联想" /></a></li>
<li><a href="#?brand-hp-11-ch-553-c-0/" title="惠普" ><img src="http://www.jq-school.com/upload/hot_brandlogo/11.jpg" alt="惠普" /></a></li>
<li><a href="#?brand-samsung-6-ch-553-c-0/" title="三星" ><img src="http://www.jq-school.com/upload/hot_brandlogo/6.jpg" alt="三星" /></a></li>
<li><a href="#?brand-asus-78-ch-553-c-0/" title="华硕" ><img src="http://www.jq-school.com/upload/hot_brandlogo/78.jpg" alt="华硕" /></a></li>
<li><a href="#?brand-dell-12-ch-553-c-0/" title="戴尔" ><img src="http://www.jq-school.com/upload/hot_brandlogo/12.jpg" alt="戴尔" /></a></li>
</ul>
<div class="cl"></div>
</div>
<div class="merchantpromotion">
<h3>推荐商家</h3>
<div class="txtList">
<ul>
<li><a href="#?apple-95467/mcate-553-0/" title="苹果中国官方网站">苹果中国官方网站</a></li>
<li><a href="#?newegg-539/mcate-553-0/" title="新蛋商城">新蛋商城</a></li>
<li><a href="#?amazon-650/mcate-553-0/" title="亚马逊">亚马逊</a></li>
<li><a href="#?dangdang-228/mcate-553-0/" title="当当网">当当网</a></li>
<li><a href="#?icson-732/mcate-553-0/" title="易迅网">易迅网</a></li>
<li><a href="#?gomemall-545/mcate-553-0/" title="国美电器">国美电器</a></li>
</ul>
</div>
<div class="cl"></div>
</div>
</div>
<div class="cl"></div>
</div>
</li>
<li> <a href="#?officedevice-673/" >办公设备、耗材</a>
<div class="submenubox disn">
<div class="subcate">
<ul>
<li><a href="#?officedevice-673/category/project-608/" >投影仪</a></li>
<li><a href="#?officedevice-673/category/laserprinter-675/" >打印机</a></li>
<li><a href="#?officedevice-673/category/scanner-678/" >扫描仪</a></li>
<li><a href="#?officedevice-673/category/faxmachine-679/" >传真机</a></li>
<li><a href="#?officedevice-673/category/copymachine-680/" >复印机</a></li>
<li><a href="#?officedevice-673/category/nin1machine-681/" >多功能一体机</a></li>
<li><a href="#?officedevice-673/category/scraper-706/" >碎纸机</a></li>
</ul>
</div>
<div class="colright">
<div class="featuredbrand">
<h3>推荐品牌</h3>
<ul>
<li><a href="#?brand-hp-11-ch-673-c-0/" title="惠普" ><img src="http://www.jq-school.com/upload/hot_brandlogo/11.jpg" alt="惠普" /></a></li>
<li><a href="#?brand-canon-18-ch-673-c-0/" title="佳能" ><img src="http://www.jq-school.com/upload/hot_brandlogo/18.jpg" alt="佳能" /></a></li>
<li><a href="#?brand-toshiba-126-ch-673-c-0/" title="东芝" ><img src="http://www.jq-school.com/upload/hot_brandlogo/126.jpg" alt="东芝" /></a></li>
<li><a href="#?brand-epson-22-ch-673-c-0/" title="爱普生" ><img src="http://www.jq-school.com/upload/hot_brandlogo/22.jpg" alt="爱普生" /></a></li>
<li><a href="#?brand-deli-368-ch-673-c-0/" title="得力" ><img src="http://www.jq-school.com/upload/hot_brandlogo/368.jpg" alt="得力" /></a></li>
<li><a href="#?brand-comix-369-ch-673-c-0/" title="齐心" ><img src="http://www.jq-school.com/upload/hot_brandlogo/369.jpg" alt="齐心" /></a></li>
</ul>
<div class="cl"></div>
</div>
<div class="merchantpromotion">
<h3>推荐商家</h3>
<div class="txtList">
<ul>
<li><a href="#?staples-469/mcate-673-0/" title="史泰博">史泰博</a></li>
<li><a href="#?officedepot-83318/mcate-673-0/" title="欧迪办公">欧迪办公</a></li>
<li><a href="#?360buy-39/mcate-673-0/" title="京东商城">京东商城</a></li>
<li><a href="#?easy361-84841/mcate-673-0/" title="易斯来福">易斯来福</a></li>
<li><a href="#?yihaodian-12822/mcate-673-0/" title="一号店">一号店</a></li>
<li><a href="#?newegg-539/mcate-673-0/" title="新蛋商城">新蛋商城</a></li>
</ul>
</div>
<div class="cl"></div>
</div>
</div>
<div class="cl"></div>
</div>
</li>
<li> <a href="#?communication-666/" >手机通讯、配件</a>
<div class="submenubox disn">
<div class="subcate">
<ul>
<li><a href="#?communication-666/category/threeg-671/" >手机</a></li>
<li><a href="#?communication-666/category/interphone-703/" >对讲机</a></li>
<li><a href="#?communication-666/category/phone-704/" >电话机</a></li>
<li><a href="#?communication-666/category/cell_phone_battery-727/" >手机电池</a></li>
<li><a href="#?communication-666/category/cases_pouches-729/" >手机外壳</a></li>
<li><a href="#?communication-666/category/bluetooth_earphone-732/" >蓝牙耳机</a></li>
</ul>
</div>
<div class="colright">
<div class="featuredbrand">
<h3>推荐品牌</h3>
<ul>
<li><a href="#?brand-apple-87-ch-666-c-0/" title="苹果" ><img src="http://www.jq-school.com/upload/hot_brandlogo/18.jpg" alt="苹果" /></a></li>
<li><a href="#?brand-samsung-6-ch-666-c-0/" title="三星" ><img src="http://www.jq-school.com/upload/hot_brandlogo/6.jpg" alt="三星" /></a></li>
<li><a href="#?brand-nokia-13-ch-666-c-0/" title="诺基亚" ><img src="http://www.jq-school.com/upload/hot_brandlogo/13.jpg" alt="诺基亚" /></a></li>
<li><a href="#?brand-htc-115-ch-666-c-0/" title="宏达" ><img src="http://www.jq-school.com/upload/hot_brandlogo/115.jpg" alt="宏达" /></a></li>
<li><a href="#?brand-motorola-17-ch-666-c-0/" title="摩托罗拉" ><img src="http://www.jq-school.com/upload/hot_brandlogo/17.jpg" alt="摩托罗拉" /></a></li>
<li><a href="#?brand-huawei-344-ch-666-c-0/" title="华为" ><img src="http://www.jq-school.com/upload/hot_brandlogo/344.jpg" alt="华为" /></a></li>
</ul>
<div class="cl"></div>
</div>
<div class="merchantpromotion">
<h3>推荐商家</h3>
<div class="txtList">
<ul>
<li><a href="#?51mdq-13133/mcate-666-0/" title="库巴购物网">库巴购物网</a></li>
<li><a href="#?icson-732/mcate-666-0/" title="易迅网">易迅网</a></li>
<li><a href="#?newegg-539/mcate-666-0/" title="新蛋商城">新蛋商城</a></li>
<li><a href="#?mmloo-13012/mcate-666-0/" title="米米乐">米米乐</a></li>
<li><a href="#?ouku-5413/mcate-666-0/" title="欧酷网">欧酷网</a></li>
<li><a href="#?orange3c-83324/mcate-666-0/" title="品橙网">品橙网</a></li>
</ul>
</div>
<div class="cl"></div>
</div>
</div>
<div class="cl"></div>
</div>
</li>
<li> <a href="#?cosmetics-693/" >护肤、美妆、美体</a>
<div class="submenubox disn">
<div class="subcate">
<ul>
<li><a href="#?cosmetics-693/category/skin-694/" >面部护理</a></li>
<li><a href="#?cosmetics-693/category/nvshixiangshui-740/" >女士香水</a></li>
<li><a href="#?cosmetics-693/category/nanshixiangshui-741/" >男士香水</a></li>
<li><a href="#?cosmetics-693/category/zhexiagao-728/" >遮瑕膏</a></li>
<li><a href="#?cosmetics-693/category/jiemaogao-735/" >睫毛膏</a></li>
<li><a href="#?cosmetics-693/category/fenbing-730/" >粉饼</a></li>
<li><a href="#?cosmetics-693/category/fendiye-729/" >粉底液</a></li>
<li><a href="#?cosmetics-693/category/chungaochunbichuncai-737/" >唇彩</a></li>
</ul>
</div>
<div class="colright">
<div class="featuredbrand">
<h3>推荐品牌</h3>
<ul>
<li><a href="#?brand-l_oreal-84-ch-693-c-0/" title="欧莱雅" ><img src="http://www.jq-school.com/upload/hot_brandlogo/84.jpg" alt="欧莱雅" /></a></li>
<li><a href="#?brand-lancome-81-ch-693-c-0/" title="兰蔻" ><img src="http://www.jq-school.com/upload/hot_brandlogo/81.jpg" alt="兰蔻" /></a></li>
<li><a href="#?brand-clinique-83-ch-693-c-0/" title="倩碧" ><img src="http://www.jq-school.com/upload/hot_brandlogo/83.jpg" alt="倩碧" /></a></li>
<li><a href="#?brand-kiehl_s-240-ch-693-c-0/" title="科颜氏" ><img src="http://www.jq-school.com/upload/hot_brandlogo/240.jpg" alt="科颜氏" /></a></li>
<li><a href="#?brand-herborist-128-ch-693-c-0/" title="佰草集" ><img src="http://www.jq-school.com/upload/hot_brandlogo/128.jpg" alt="佰草集" /></a></li>
<li><a href="#?brand-estee_lauder-61-ch-693-c-0/" title="雅诗兰黛" ><img src="http://www.jq-school.com/upload/hot_brandlogo/61.jpg" alt="雅诗兰黛" /></a></li>
</ul>
<div class="cl"></div>
</div>
<div class="merchantpromotion">
<h3>推荐商家</h3>
<div class="txtList">
<ul>
<li><a href="#?lafaso-13560/mcate-693-0/" title="乐蜂网">乐蜂网</a></li>
<li><a href="#?sasa-5879/mcate-693-0/" title="莎莎网">莎莎网</a></li>
<li><a href="#?sephora-4685/mcate-693-0/" title="丝芙兰">丝芙兰</a></li>
<li><a href="#?nala-84782/mcate-693-0/" title="NALA化妆品商城">NALA化妆品商城</a></li>
<li><a href="#?strawberrynet-4491/mcate-693-0/" title="草莓网">草莓网</a></li>
<li><a href="#?jumei-4759/mcate-693-0/" title="聚美优品">聚美优品</a></li>
</ul>
</div>
<div class="cl"></div>
</div>
</div>
<div class="cl"></div>
</div>
</li>
<li> <a href="#?clothing-1016/" >流行服饰、配饰</a>
<div class="submenubox disn">
<div class="subcate">
<ul>
<li><a href="#?clothing-1016/category/womens_onepiece_dress-81/" >时尚连衣裙</a></li>
<li><a href="#?clothing-1016/category/womens_knitwear-59/" >女士针织衫</a></li>
<li><a href="#?clothing-1016/category/womens_shirt-53/" >女士衬衫</a></li>
<li><a href="#?clothing-1016/category/womens_base_layer_clothing-56/" >女士打底衫</a></li>
<li><a href="#?clothing-1016/category/womanunderwear-35/" >女士内衣</a></li>
<li><a href="#?clothing-1016/category/mens_tshirt-91/" >男士T恤</a></li>
<li><a href="#?clothing-1016/category/mens_jeans-110/" >男士牛仔裤</a></li>
<li><a href="#?clothing-1016/category/mens_shirt-92/" >男士衬衫</a></li>
<li><a href="#?clothing-1016/category/manunderwear-41/" >男士内衣</a></li>
</ul>
</div>
<div class="colright">
<div class="featuredbrand">
<h3>推荐品牌</h3>
<ul>
<li><a href="#?brand-vancl-225-ch-1016-c-0/" title="凡客诚品" ><img src="http://www.jq-school.com/upload/hot_brandlogo/225.jpg" alt="凡客诚品" /></a></li>
<li><a href="#?brand-hstyle-302-ch-1016-c-0/" title="韩都衣舍" ><img src="http://www.jq-school.com/upload/hot_brandlogo/302.jpg" alt="韩都衣舍" /></a></li>
<li><a href="#?brand-only-32-ch-1016-c-0/" title="ONLY" ><img src="http://www.jq-school.com/upload/hot_brandlogo/32.jpg" alt="ONLY" /></a></li>
<li><a href="#?brand-gxg-305-ch-1016-c-0/" title="GXG" ><img src="http://www.jq-school.com/upload/hot_brandlogo/305.jpg" alt="GXG" /></a></li>
<li><a href="#?brand-peacebird-167-ch-1016-c-0/" title="太平鸟" ><img src="http://www.jq-school.com/upload/hot_brandlogo/167.jpg" alt="太平鸟" /></a></li>
<li><a href="#?brand-vero_moda-238-ch-1016-c-0/" title="VERO MODA" ><img src="http://www.jq-school.com/upload/hot_brandlogo/238.jpg" alt="VERO MODA" /></a></li>
</ul>
<div class="cl"></div>
</div>
<div class="merchantpromotion">
<h3>推荐商家</h3>
<div class="txtList">
<ul>
<li><a href="#?justyle-6326/mcate-1016-0/" title="Justyle">Justyle</a></li>
<li><a href="#?yintai-73870/mcate-1016-0/" title="银泰">银泰</a></li>
<li><a href="#?moonbasa-3862/mcate-1016-0/" title="梦芭莎">梦芭莎</a></li>
<li><a href="#?yoho!-6677/mcate-1016-0/" title="YOHO!有货">YOHO!有货</a></li>
<li><a href="#?fclub-64015/mcate-1016-0/" title="聚尚网">聚尚网</a></li>
<li><a href="#?vancl-4250/mcate-1016-0/" title="凡客诚品">凡客诚品</a></li>
</ul>
</div>
<div class="cl"></div>
</div>
</div>
<div class="cl"></div>
</div>
</li>
<li> <a href="#?shoessuitcasesbags-1018/" >鞋子箱包</a>
<div class="submenubox disn">
<div class="subcate">
<ul>
<li><a href="#?shoessuitcasesbags-1018/category/womansshoes-5/" >女士单鞋</a></li>
<li><a href="#?shoessuitcasesbags-1018/category/shoeleather-13/" >男士皮鞋</a></li>
<li><a href="#?shoessuitcasesbags-1018/category/gymshoes-7/" >女式运动鞋</a></li>
<li><a href="#?shoessuitcasesbags-1018/category/canvasshoes-16/" >男士帆布鞋</a></li>
<li><a href="#?shoessuitcasesbags-1018/category/singleshoulderbag-21/" >单肩包</a></li>
<li><a href="#?shoessuitcasesbags-1018/category/satchel-23/" >斜挎包</a></li>
<li><a href="#?shoessuitcasesbags-1018/category/waistbag-24/" >腰包</a></li>
<li><a href="#?shoessuitcasesbags-1018/category/wallet-25/" >钱包</a></li>
<li><a href="#?shoessuitcasesbags-1018/category/travelingbags-27/" >旅行包</a></li>
</ul>
</div>
<div class="colright">
<div class="featuredbrand">
<h3>推荐品牌</h3>
<ul>
<li><a href="#?brand-teenmix-181-ch-1018-c-0/" title="天美意" ><img src="http://www.jq-school.com/upload/hot_brandlogo/181.jpg" alt="天美意" /></a></li>
<li><a href="#?brand-belle-477-ch-1018-c-0/" title="百丽" ><img src="http://www.jq-school.com/upload/hot_brandlogo/477.jpg" alt="百丽" /></a></li>
<li><a href="#?brand-st_sat-384-ch-1018-c-0/" title="星期六" ><img src="http://www.jq-school.com/upload/hot_brandlogo/384.jpg" alt="星期六" /></a></li>
<li><a href="#?brand-basto-268-ch-1018-c-0/" title="百思图" ><img src="http://www.jq-school.com/upload/hot_brandlogo/268.jpg" alt="百思图" /></a></li>
<li><a href="#?brand-red_dragonfly-182-ch-1018-c-0/" title="红蜻蜓" ><img src="http://www.jq-school.com/upload/hot_brandlogo/182.jpg" alt="红蜻蜓" /></a></li>
<li><a href="#?brand-daphne-183-ch-1018-c-0/" title="达芙妮" ><img src="http://www.jq-school.com/upload/hot_brandlogo/183.jpg" alt="达芙妮" /></a></li>
</ul>
<div class="cl"></div>
</div>
<div class="merchantpromotion">
<h3>推荐商家</h3>
<div class="txtList">
<ul>
<li><a href="#?yintai-73870/mcate-1018-0/" title="银泰">银泰</a></li>
<li><a href="#?mbaobao-4889/mcate-1018-0/" title="麦包包">麦包包</a></li>
<li><a href="#?masamaso-12740/mcate-1018-0/" title="玛萨 玛索">玛萨 玛索</a></li>
<li><a href="#?htjz-39540/mcate-1018-0/" title="胡桃夹子">胡桃夹子</a></li>
<li><a href="#?yougou-85086/mcate-1018-0/" title="优购网">优购网</a></li>
<li><a href="#?letao-58034/mcate-1018-0/" title="乐淘">乐淘</a></li>
</ul>
</div>
<div class="cl"></div>
</div>
</div>
<div class="cl"></div>
</div>
</li>
<li> <a href="#?home-1015/" >家电、家居用品</a>
<div class="submenubox disn">
<div class="subcate">
<ul>
<li><a href="#?home-1015/category/aircondition-13/" >空调</a></li>
<li><a href="#?home-1015/category/icebox-14/" >冰箱</a></li>
<li><a href="#?home-1015/category/washer-5/" >洗衣机</a></li>
<li><a href="#?home-1015/category/television-4/" >电视机</a></li>
<li><a href="#?home-1015/category/sleaner-8/" >吸尘器</a></li>
<li><a href="#?home-1015/category/kitchenware-34/" >餐厨用品</a></li>
<li><a href="#?home-1015/category/balnearythings-36/" >卫浴用品</a></li>
<li><a href="#?home-1015/category/bedding-26/" >床上用品</a></li>
<li><a href="#?home-1015/category/hometextile-24/" >家纺布艺</a></li>
<li><a href="#?home-1015/category/weiyu-43/" >卫浴</a></li>
<li><a href="#?home-1015/category/dengshi-46/" >灯饰</a></li>
<li><a href="#?home-1015/category/kaiguan/chazuo-45/" >开关/插座</a></li>
</ul>
</div>
<div class="colright">
<div class="featuredbrand">
<h3>推荐品牌</h3>
<ul>
<li><a href="#?brand-godhui-585-ch-1015-c-0/" title="赶灯荟" ><img src="http://www.jq-school.com/upload/hot_brandlogo/585.jpg" alt="赶灯荟" /></a></li>
<li><a href="#?brand-philips-14-ch-1015-c-0/" title="飞利浦" ><img src="http://www.jq-school.com/upload/hot_brandlogo/14.jpg" alt="飞利浦" /></a></li>
<li><a href="#?brand-midea-23-ch-1015-c-0/" title="美的" ><img src="http://www.jq-school.com/upload/hot_brandlogo/23.jpg" alt="美的" /></a></li>
<li><a href="#?brand-sacon-160-ch-1015-c-0/" title="帅康" ><img src="http://www.jq-school.com/upload/hot_brandlogo/160.jpg" alt="帅康" /></a></li>
<li><a href="#?brand-galanz-321-ch-1015-c-0/" title="格兰仕" ><img src="http://www.jq-school.com/upload/hot_brandlogo/321.jpg" alt="格兰仕" /></a></li>
<li><a href="#?brand-joyoung-93-ch-1015-c-0/" title="九阳" ><img src="http://www.jq-school.com/upload/hot_brandlogo/93.jpg" alt="九阳" /></a></li>
</ul>
<div class="cl"></div>
</div>
<div class="merchantpromotion">
<h3>推荐商家</h3>
<div class="txtList">
<ul>
<li><a href="#?gomemall-545/mcate-1015-0/" title="国美电器">国美电器</a></li>
<li><a href="#?51mdq-13133/mcate-1015-0/" title="库巴购物网">库巴购物网</a></li>
<li><a href="#?metromall-88184/mcate-1015-0/" title="麦德龙">麦德龙</a></li>
<li><a href="#?konka-85202/mcate-1015-0/" title="康佳直销商城">康佳直销商城</a></li>
<li><a href="#?homevv-86097/mcate-1015-0/" title="为为网">为为网</a></li>
<li><a href="#?suningshop-3505/mcate-1015-0/" title="苏宁易购">苏宁易购</a></li>
</ul>
</div>
<div class="cl"></div>
</div>
</div>
<div class="cl"></div>
</div>
</li>
<li> <a href="#?baby-1014/" >母婴、玩具</a>
<div class="submenubox disn">
<div class="subcate">
<ul>
<li><a href="#?baby-1014/category/milkpowder-4/" >奶粉</a></li>
<li><a href="#?baby-1014/category/diaper-7-atr_1-28.htm" >婴儿纸尿裤</a></li>
<li><a href="#?baby-1014/category/motherproducts-2-atr_1-1.htm" >孕妇装</a></li>
<li><a href="#?baby-1014/category/motherproducts-2-atr_1-2.htm" >防辐射衣</a></li>
<li><a href="#?baby-1014/category/motherproducts-2-atr_1-3.htm" >孕妇内衣</a></li>
<li><a href="#?baby-1014/category/motherproducts-2-atr_1-4.htm" >吸奶器</a></li>
</ul>
</div>
<div class="colright">
<div class="featuredbrand">
<h3>推荐品牌</h3>
<ul>
<li><a href="#?brand-dumex-8-ch-1014-c-0/" title="多美滋" ><img src="http://www.jq-school.com/upload/hot_brandlogo/8.jpg" alt="多美滋" /></a></li>
<li><a href="#?brand-pigeon-41-ch-1014-c-0/" title="贝亲" ><img src="http://www.jq-school.com/upload/hot_brandlogo/41.jpg" alt="贝亲" /></a></li>
<li><a href="#?brand-meadjohnson-156-ch-1014-c-0/" title="美赞臣" ><img src="http://www.jq-school.com/upload/hot_brandlogo/156.jpg" alt="美赞臣" /></a></li>
<li><a href="#?brand-beingmate-157-ch-1014-c-0/" title="贝因美" ><img src="http://www.jq-school.com/upload/hot_brandlogo/157.jpg" alt="贝因美" /></a></li>
<li><a href="#?brand-abbott-158-ch-1014-c-0/" title="雅培" ><img src="http://www.jq-school.com/upload/hot_brandlogo/158.jpg" alt="雅培" /></a></li>
<li><a href="#?brand-yashily-159-ch-1014-c-0/" title="雅士利" ><img src="http://www.jq-school.com/upload/hot_brandlogo/159.jpg" alt="雅士利" /></a></li>
</ul>
<div class="cl"></div>
</div>
<div class="merchantpromotion">
<h3>推荐商家</h3>
<div class="txtList">
<ul>
<li><a href="#?redbaby-3261/mcate-1014-0/" title="红孩子">红孩子</a></li>
<li><a href="#?tongyiku-58083/mcate-1014-0/" title="童壹库">童壹库</a></li>
<li><a href="#?lvhezi-84681/mcate-1014-0/" title="绿盒子">绿盒子</a></li>
<li><a href="#?u1baby-85712/mcate-1014-0/" title="优1baby">优1baby</a></li>
<li><a href="#?muyingzhijia-3275/mcate-1014-0/" title="母婴之家">母婴之家</a></li>
<li><a href="#?leyou-3265/mcate-1014-0/" title="乐友孕婴童">乐友孕婴童</a></li>
</ul>
</div>
<div class="cl"></div>
</div>
</div>
<div class="cl"></div>
</div>
</li>
<li> <a href="#?gift-1010/" >礼品、首饰、饰品</a>
<div class="submenubox disn">
<div class="subcate">
<ul>
<li><a href="#?gift-1010/category/watch-14/" >手表</a></li>
<li><a href="#?gift-1010/category/glasses-13/" >眼镜</a></li>
<li><a href="#?gift-1010/category/lighter_tobacco_accessory-25/" >火机烟具</a></li>
<li><a href="#?gift-1010/category/ring-36/" >戒指</a></li>
<li><a href="#?gift-1010/category/necklace_pendant-32/" >项链/吊坠</a></li>
<li><a href="#?gift-1010/category/loose_diamond-40/" >裸钻</a></li>
<li><a href="#?gift-1010/category/swiss_army_knife-29/" >瑞士军刀</a></li>
<li><a href="#?gift-1010/category/gift-1/" >礼品摆设</a></li>
</ul>
</div>
<div class="colright">
<div class="featuredbrand">
<h3>推荐品牌</h3>
<ul>
<li><a href="#?brand-zippo-27-ch-1010-c-0/" title="芝宝" ><img src="http://www.jq-school.com/upload/hot_brandlogo/27.jpg" alt="芝宝" /></a></li>
<li><a href="#?brand-swatch-29-ch-1010-c-0/" title="斯沃琪" ><img src="http://www.jq-school.com/upload/hot_brandlogo/29.jpg" alt="斯沃琪" /></a></li>
<li><a href="#?brand-tissot-49-ch-1010-c-0/" title="天梭" ><img src="http://www.jq-school.com/upload/hot_brandlogo/49.jpg" alt="天梭" /></a></li>
<li><a href="#?brand-tag_heuer-53-ch-1010-c-0/" title="豪雅" ><img src="http://www.jq-school.com/upload/hot_brandlogo/53.jpg" alt="豪雅" /></a></li>
<li><a href="#?brand-hamilton-54-ch-1010-c-0/" title="汉米尔顿" ><img src="http://www.jq-school.com/upload/hot_brandlogo/54.jpg" alt="汉米尔顿" /></a></li>
<li><a href="#?brand-fiyta-56-ch-1010-c-0/" title="飞亚达" ><img src="http://www.jq-school.com/upload/hot_brandlogo/56.jpg" alt="飞亚达" /></a></li>
</ul>
<div class="cl"></div>
</div>
<div class="merchantpromotion">
<h3>推荐商家</h3>
<div class="txtList">
<ul>
<li><a href="#?meijing-88149/mcate-1010-0/" title="美睛网">美睛网</a></li>
<li><a href="#?likebuy-2932/mcate-1010-0/" title="乐买网">乐买网</a></li>
<li><a href="#?yaahe-58082/mcate-1010-0/" title="合亚眼镜">合亚眼镜</a></li>
<li><a href="#?oaec-62077/mcate-1010-0/" title="环亚商城">环亚商城</a></li>
<li><a href="#?easeeyes-83271/mcate-1010-0/" title="易视网">易视网</a></li>
<li><a href="#?ctfeshop-88150/mcate-1010-0/" title="周大福">周大福</a></li>
</ul>
</div>
<div class="cl"></div>
</div>
</div>
<div class="cl"></div>
</div>
</li>
<li> <a href="#?sportoutdoors-1008/" >运动器材、户外装备</a>
<div class="submenubox disn">
<div class="subcate">
<ul>
<li><a href="#?sportoutdoors-1008/category/sportshoes-6/" >运动鞋</a></li>
<li><a href="#?sportoutdoors-1008/category/sportbag-7/" >运动包</a></li>
<li><a href="#?sportoutdoors-1008/category/outdoorsequip-13/" >野营装备</a></li>
<li><a href="#?sportoutdoors-1008/category/healthmachine-10/" >健身器材</a></li>
<li><a href="#?sportoutdoors-1008/category/sportacc-8/" >运动配件</a></li>
</ul>
</div>
<div class="colright">
<div class="featuredbrand">
<h3>推荐品牌</h3>
<ul>
<li><a href="#?brand-dhs-44-ch-1008-c-0/" title="红双喜" ><img src="http://www.jq-school.com/upload/hot_brandlogo/44.jpg" alt="红双喜" /></a></li>
<li><a href="#?brand-fire_maple-149-ch-1008-c-0/" title="火枫" ><img src="http://www.jq-school.com/upload/hot_brandlogo/149.jpg" alt="火枫" /></a></li>
<li><a href="#?brand-spalding-418-ch-1008-c-0/" title="斯伯丁" ><img src="http://www.jq-school.com/upload/hot_brandlogo/418.jpg" alt="斯伯丁" /></a></li>
<li><a href="#?brand-yonex-419-ch-1008-c-0/" title="尤尼克斯" ><img src="http://www.jq-school.com/upload/hot_brandlogo/419.jpg" alt="尤尼克斯" /></a></li>
<li><a href="#?brand-mizuno-412-ch-1008-c-0/" title="美津浓" ><img src="http://www.jq-school.com/upload/hot_brandlogo/412.jpg" alt="美津浓" /></a></li>
<li><a href="#?brand-toread-148-ch-1008-c-0/" title="探路者" ><img src="http://www.jq-school.com/upload/hot_brandlogo/148.jpg" alt="探路者" /></a></li>
</ul>
<div class="cl"></div>
</div>
<div class="merchantpromotion">
<h3>推荐商家</h3>
<div class="txtList">
<ul>
<li><a href="#?ettshop-86123/mcate-1008-0/" title="宜太太商城">宜太太商城</a></li>
<li><a href="#?letao-58034/mcate-1008-0/" title="乐淘">乐淘</a></li>
<li><a href="#?yougou-85086/mcate-1008-0/" title="优购网">优购网</a></li>
<li><a href="#?k121-83367/mcate-1008-0/" title="酷运动">酷运动</a></li>
<li><a href="#?yoger.com.cn-64243/mcate-1008-0/" title="优个网">优个网</a></li>
<li><a href="#?e-lining-6450/mcate-1008-0/" title="李宁官方网上商城">李宁官方网上商城</a></li>
</ul>
</div>
<div class="cl"></div>
</div>
</div>
<div class="cl"></div>
</div>
</li>
<li> <a href="#?autoapp-1007/" >汽车用品</a>
<div class="submenubox disn">
<div class="subcate">
<ul>
<li><a href="#?autoapp-1007/category/carav-5/" >车载播放器</a></li>
<li><a href="#?DVD-se-ch-1007-c-5/" >车载DVD</a></li>
<li><a href="#?autoapp-1007/category/carcommnav-6/" >车载GPS</a></li>
<li><a href="#?autoapp-1007/category/carindecoration-10/" >车内装饰</a></li>
<li><a href="#?autoapp-1007/category/carsafe-9/" >汽车防盗器</a></li>
</ul>
</div>
<div class="colright">
<div class="featuredbrand">
<h3>推荐品牌</h3>
<ul>
<li><a href="#?brand-benz-38-ch-1007-c-0/" title="奔驰" ><img src="http://www.jq-school.com/upload/hot_brandlogo/38.jpg" alt="奔驰" /></a></li>
<li><a href="#?brand-volkswagen-35-ch-1007-c-0/" title="大众" ><img src="http://www.jq-school.com/upload/hot_brandlogo/35.jpg" alt="大众" /></a></li>
<li><a href="#?brand-osram-668-ch-1007-c-0/" title="欧司朗" ><img src="http://www.jq-school.com/upload/hot_brandlogo/668.jpg" alt="欧司朗" /></a></li>
<li><a href="#?brand-bosch-401-ch-1007-c-0/" title="博世" ><img src="http://www.jq-school.com/upload/hot_brandlogo/401.jpg" alt="博世" /></a></li>
<li><a href="#?brand-mio-113-ch-1007-c-0/" title="宇达电通" ><img src="http://www.jq-school.com/upload/hot_brandlogo/113.jpg" alt="宇达电通" /></a></li>
<li><a href="#?brand-audi-40-ch-1007-c-0/" title="奥迪" ><img src="http://www.jq-school.com/upload/hot_brandlogo/40.jpg" alt="奥迪" /></a></li>
</ul>
<div class="cl"></div>
</div>
<div class="merchantpromotion">
<h3>推荐商家</h3>
<div class="txtList">
<ul>
<li><a href="#?cheeee-6010/mcate-1007-0/" title="中国车主网">中国车主网</a></li>
<li><a href="#?autofans-12952/mcate-1007-0/" title="北京车迷店">北京车迷店</a></li>
<li><a href="#?mchepin-88289/mcate-1007-0/" title="迈车品">迈车品</a></li>
<li><a href="#?autosup-638/mcate-1007-0/" title="中国汽车用品在线">中国汽车用品在线</a></li>
<li><a href="#?car6688-640/mcate-1007-0/" title="金星汽车用品商城">金星汽车用品商城</a></li>
</ul>
</div>
<div class="cl"></div>
</div>
</div>
<div class="cl"></div>
</div>
</li>
<li class="last" id="lastSelected"><a href="javascript:void(0);" title="所有分类">所有分类</a>
<div class="submenubox disn">
<div class="subcate">
<ul>
<li><a href="#?computers-553/" title="电脑、硬件">电脑、硬件</a></li>
<li><a href="#?electronics-642/" title="数码产品、配件">数码产品、配件</a></li>
<li><a href="#?communication-666/" title="手机通讯、配件">手机通讯、配件</a></li>
<li><a href="#?officedevice-673/" title="办公设备、耗材">办公设备、耗材</a></li>
<li><a href="#?cosmetics-693/" title="护肤、美妆、美体">护肤、美妆、美体</a></li>
<li><a href="#?autoapp-1007/" title="汽车用品">汽车用品</a></li>
<li><a href="#?sportoutdoors-1008/" title="运动器材、户外装备">运动器材、户外装备</a></li>
<li><a href="#?flower-1009/" title="鲜花园艺">鲜花园艺</a></li>
<li><a href="#?gift-1010/" title="礼品、首饰、饰品">礼品、首饰、饰品</a></li>
<li><a href="#?book-1011/" title="图书">图书</a></li>
<li><a href="#?movie-1013/" title="影视">影视</a></li>
<li><a href="#?baby-1014/" title="母婴、玩具">母婴、玩具</a></li>
<li><a href="#?home-1015/" title="家电、家居用品">家电、家居用品</a></li>
<li><a href="#?clothing-1016/" title="流行服饰、配饰">流行服饰、配饰</a></li>
<li><a href="#?shoessuitcasesbags-1018/" title="鞋子箱包">鞋子箱包</a></li>
<li><a href="#?food-1019/" title="食品">食品</a></li>
<li><a href="#?auto-1020/" title="汽车">汽车</a></li>
<li><a href="#?solidshop-1021/" title="实体店">实体店</a></li>
<li><a href="#?petsupplies-1023/" title="宠物用品">宠物用品</a></li>
<li><a href="#?hotel-1025/" title="酒店预订">酒店预订</a></li>
<li><a href="#?c2c/" title="淘宝精品">淘宝精品</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<!--end topblock -->
<div class="cl"></div>
</div>
</div>
</div>
<!--end main-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="js/topMenu.js?113"></script>
</body>
</html>
JS代码(topMenu.js):
function async_topMenu(object){
//避免鼠标触发时，前面的ajax尚未执行完毕 $(object).children("div").html('<img src="/images/default/icon_loading.gif" title="数据加载中" style="width:32px;
height:32px;
padding:20px 0 20px 240px;
">');
if (running){
return false;
}
running = true;
//var obj = obj;
$.ajax({
type:"GET",url:"/async_topMenu.php",dataType:"json",success:function(cateList){
if(cateList){
//把数据innerHTML到所有标签内 $("div.nav > ul > li").each(function(i,obj){
var key = $(obj).attr('id');
if(key == 'lastSelected'){
//有key的标签切换，无则是所有分类 var innerHTML = innerAll(cateList['all']);
}
else{
var innerHTML = innerTag(cateList['tag'][i]);
}
$(obj).children("div").html(innerHTML);
}
);
}
}
}
);
}
//获取数据，并赋予htmlfunction innerTag(cateList){
//左边html var innerHTML = '<div class="subcate">';
//分类if(cateList.category){
innerHTML += '<ul>';
var flagMore = 0;
var subList = cateList.category;
for(var skey in subList){
if(subList[skey].attributes.hidden != "yes" && flagMore < 12){
innerHTML += '<li>';
innerHTML += '<a href="'+subList[skey].url+'"';
if(subList[skey].attributes.nofollow == "yes"){
innerHTML += ' rel="nofollow"';
}
innerHTML += '>';
if(subList[skey].attributes.strong == "yes"){
innerHTML += '<strong>'+subList[skey].name+'</strong>';
}
else{
innerHTML += subList[skey].name;
}
innerHTML += '</a>';
innerHTML += '</li>';
flagMore ++;
}
}
innerHTML += '</ul>';
}
innerHTML += '</div>';
//右边html innerHTML += '<div class="colright">';
//推荐品牌 innerHTML += '<div class="featuredbrand">';
innerHTML += '<h3>推荐品牌</h3>';
//推荐品牌，只取6个 if (cateList.BrandList){
var brandList = cateList.BrandList;
innerHTML += '<ul>';
for(var bkey in brandList){
if(bkey < 6){
innerHTML += '<li>';
innerHTML += '<a href="'+brandList[bkey].Url+'" title="'+brandList[bkey].BrandName+'"><img src="'+brandList[bkey].ImageUrl+'" alt="'+brandList[bkey].BrandName+'" /></a>';
innerHTML += '</li>';
}
}
innerHTML += '</ul>';
innerHTML += '<div class="cl"></div>';
}
innerHTML += '</div>';
//推荐商家 innerHTML += '<div class="merchantpromotion">';
innerHTML += '<h3>推荐商家</h3>';
if(cateList.MerList){
var merList = cateList.MerList;
innerHTML += '<ul>';
for(var mkey in merList){
innerHTML += '<li><a href="'+merList[mkey].Url+'" title="'+merList[mkey].MerchantName+'">'+merList[mkey].MerchantName+'</a></li>';
}
innerHTML += '</ul>';
}
innerHTML += '</div>';
innerHTML += '</div>';
//colright endinnerHTML += '<div class="cl"></div>';
innerHTML += '</div>';
return innerHTML;
}
function innerAll(cateList){
var innerHTML = '<div class="subcate"><ul>';
for(var key in cateList){
innerHTML += '<li><a href='+key+' title='+cateList[key]+'>'+cateList[key]+'</a></li>';
}
innerHTML += '</ul></div>';
return innerHTML;
}
var running = false;
//是否在运行中var delay = 200;
var allCateTimer = null;
//当菜单html刚载入完成开始监控菜单是否展示$('div#nav:not(.homenav)').hover( function(){
var $this = this;
allCateTimer = setTimeout(function(){
$($this).find('div.allcate > a').addClass('hover');
$($this).children('ul').removeClass('disn');
}
,delay);
}
,function(){
var $this = this allCateTimer = setTimeout(function(){
$($this).find('div.allcate > a').removeClass('hover');
$($this).children('ul').addClass('disn');
//兼容IE6显示所有select 元素 $("select.menuVisible").each(function(){
if ($(this).css("visibility") == 'hidden'){
$(this).removeClass('menuVisible').css('visibility','visible');
}
}
);
}
,delay);
}
);
$('div#nav > ul > li').hover( function(ev){
var $this = this;
allCateTimer = setTimeout(function(){
var bottomHeight = document.documentElement.clientHeight - ev.clientY;
if (bottomHeight <= 250){
$($this).addClass('over').find('div.submenubox').addClass('submenuboxBottom').removeClass('disn');
}
else{
$($this).addClass('over').find('div.submenubox').removeClass('submenuboxBottom').removeClass('disn');
}
//兼容IE6隐藏所有select 元素 $("select").each(function(){
if ($(this).css('visibility') != 'hidden'){
$(this).addClass('menuVisible').css('visibility','hidden');
}
}
);
if ($($this).find("div.subcate").size()<= 0){
async_topMenu($this);
}
}
,delay);
}
,function(){
var $this = this;
if (allCateTimer){
clearTimeout(allCateTimer);
}
allCateTimer = setTimeout(function(){
$($this).removeClass('over').find('div.submenubox').addClass('disn');
}
,delay);
}
);
CSS代码(common.css):
@charset "utf-8";*{margin:0;padding:0;}
body{background:url(../images/body_bg.png) repeat-y center 0px;min-width:970px;}
body,p,div,th,td,input,select,textarea,ul,li,a{color:#333;font-size:12px;font-family:"宋体",Arial,Verdana;padding:0;margin:0;}
img{border:0px;}
ul{list-style:none;}
.cl,.clr{clear:both;height:0px;font-size:0;}
.disn{display:none;}
.disb{display:block;}
h1,h2,h3,h4,h5,h6{font-size:13px;font-weight:bold;}
a:link,a:visited,a:hover,a:active{color:#333333;text-decoration:none;font-size:12px;}
a:hover{text-decoration:underline;color:#669900;font-size:12px;}
.header{height:149px;background:#fff url(../images/v5_repeat_x.png) repeat-x 0 -659px;}
.header .headercontent{width:985px;margin:0 auto;}
.header .logo{height:55px;width:285px;overflow:hidden;padding:24px 0 2px 15px;margin-bottom:17px;float:left;}
.topnav{clear:both;}
.accoutbar{text-align:right;padding:17px 5px 0 0;}
.topnav .topallcate{float:left;position:relative;z-index:9999;}
.topnav .topallcate .nav{position:absolute;top:0;left:-2px;width:210px;z-index:9999;}
.nav .allcate{position:absolute;top:0;left:1px;z-index:101;}
.nav .allcate a{display:block;width:210px;height:39px;background:url(../images/v5_main_img.png) no-repeat -210px -173px;text-indent:-9999px;overflow:hidden;}
.nav .allcate a.hover{background-position:-210px -381px}
.topnav .nav ul{margin-top:39px;}
.nav ul{border-right:#83b712 6px solid;border-bottom:#83b712 6px solid;border-left:#83b712 5px solid;margin-top:50px;margin-left:10px;}
.nav ul li{height:42px;line-height:42px;padding:0 0 0 13px;background:#f9ffdd url(../images/v5_main_img.png) no-repeat 0 -247px;position:relative;z-index:100;}
.nav ul li.over{background-position:-203px -246px;}
.nav ul li a:link,.nav ul li a:active,.nav ul li a:visited{font-size:15px;padding-left:12px;color:#333;}
.nav ul li a:hover{font-size:15px;padding-left:12px;color:#669900;}
.nav ul li a strong{font-weight:normal;}
.nav ul li.over a:link,.nav ul li.over a:active,.nav ul li.over a:visited,.nav ul li.over a:hover{font-size:15px;padding-left:12px;color:#fff;}
.nav .submenubox{position:absolute;left:189px;top:1px;width:425px;border:#83b712 6px solid;background:#f9ffdd;float:left;line-height:0;overflow:hidden;}
.nav .submenuboxBottom{top:auto;bottom:1px;}
.nav .submenubox .subcate{width:150px;float:left;}
.nav .submenubox .subcate ul{border:0;margin:0;padding:2px 0;background:#83b712;margin-bottom:-2000px;padding-bottom:2000px;position:relative;}
.nav .submenubox .subcate ul li{background:none;height:auto;line-height:18px;padding:5px 0 5px 0px;position:static;z-index:auto;cursor:default;}
.nav ul li.over .subcate ul li a:link,.nav ul li.over .subcate ul li a:active,.nav ul li.over .subcate ul li a:visited{font-size:14px;padding-left:12px;color:#fff;}
.nav ul li.over .subcate ul li a:hover{color:#fff;}
.nav .submenubox .colright{width:260px;padding:0 0 0 15px;float:left;}
.nav .submenubox .featuredbrand h3{height:30px;line-height:30px;padding:5px 0 0 0;font-size:14px;color:#87af1b;}
.nav .submenubox .featuredbrand ul{border:0;margin:0;padding:5px 0;float:left;}
.nav .submenubox .featuredbrand ul li{background:#fff;width:67px;height:37px;padding:4px;margin:0 7px 7px 0;position:static;z-index:auto;float:left;overflow:hidden;}
.nav ul li.over .featuredbrand ul li a:link,.nav ul li.over .featuredbrand ul li a:active,.nav ul li.over .featuredbrand ul li a:visited{padding-left:0px;}
.nav ul li.over .featuredbrand ul li a:hover{padding-left:0px;}
.nav .submenubox .merchantpromotion h3{height:30px;line-height:30px;padding:0;font-size:14px;color:#87af1b;}
.nav .submenubox .merchantpromotion ul{border:0;margin:0;padding:0 0 5px 0;float:left;width:260px;}
.nav .submenubox .merchantpromotion ul li{float:left;white-space:nowrap;background:none;line-height:normal;height:14px;padding:5px 10px 5px 0;position:static;z-index:auto;}
.nav ul li.over .merchantpromotion ul li a:link,.nav ul li.over .merchantpromotion ul li a:active,.nav ul li.over .merchantpromotion ul li a:visited{padding-left:0px;color:#585858;font-size:12px;}
.nav ul li.over .merchantpromotion ul li a:hover{padding-left:0px;color:#669900;font-size:12px;}
.nav ul li.last .submenubox .subcate{width:420px;}
.nav ul li.last .submenubox .subcate ul{background:none;float:left;}
.nav ul li.last .submenubox .subcate ul li{float:left;width:139px;}
.nav ul li.last .subcate ul li a:link,.nav ul li.last .subcate ul li a:active,.nav ul li.last .subcate ul li a:visited{font-size:14px;padding-left:12px;color:#585858;}
.nav ul li.last .subcate ul li a:hover{color:#669900;}
.searchbox{width:483px;height:58px;margin-left:448px;padding-top:14px;position:relative;z-index:99;}
.searchbox .l{padding-left:36px;background:url(../images/v5_main_img.png) no-repeat 0 -57px;height:58px;}
.searchbox .m{background:url(../images/v5_repeat_x.png) repeat-x 0 -123px;height:58px;}
.searchbox .m .searchkey{outline:none;border:0;padding:16px 0;height:22px;line-height:22px;background:none;font-size:19px;font-weight:bold;color:#98bc00;width:290px;float:left;font-family:"microsoft yahei";}
.searchbox .m .searchcleanbut{background:url(../images/filter_del.gif) no-repeat 0 20px;cursor:pointer;border:0;width:20px;height:58px;float:left;}
.searchbox .m .searchbut{background:url(../images/v5_main_img.png) no-repeat 0 -115px;cursor:pointer;border:0;width:154px;height:58px;float:right;}
.searchbox .m .searchbutfocus{background-position:-154px -115px;}
.header .hotkeywords{margin-left:486px;padding:6px 0 0 0;color:#6f6f6f;height:15px;overflow:hidden;line-height:15px;width:495px;}
.header .hotkeywords a:link,.header .hotkeywords a:visited,.header .hotkeywords a:active{color:#6f6f6f;}
.header .hotkeywords a:hover{color:#669900;}
.wrapper{background:url(../images/v5_maintop_bg.png) no-repeat center 0;clear:both;margin:0 auto;padding-top:4px;max-width:1080px;_width:1010px;}
.wrapper .main{width:970px;margin:0 auto;background:#fff;min-height:580px;_height:580px;}
.mainbot{background:url(../images/main_bot_bg.png) no-repeat center 0;height:16px;font-size:0;margin:0 auto;max-width:1080px;_width:1010px;}
body{background:url(../images/body_bg_home.png) repeat-y center 0px;min-width:1210px;}
body,p,div,th,td,input,select,textarea,ul,li,a{font-family:"microsoft yahei","宋体",Arial,Verdana;}
.header{height:115px;background-position:0 0;}
.header .headercontent{width:1210px;margin:0 auto;}
.header .logo{padding:24px 0 2px 33px;float:left;}
.searchbox{width:653px;}
.searchbox .m .searchkey{border:0;padding:18px 0;height:22px;line-height:22px;background:none;font-size:19px;font-weight:bold;color:#98bc00;width:460px;float:left;}
.header .hotkeywords{width:auto;}
.wrapper{background:url(../images/v5_maintop_bg_home.png) no-repeat center 0;max-width:none;_width:auto;}
.wrapper .main{width:1210px;margin:0 auto;background:#fff;padding-top:0;}
.mainbot{background:url(../images/main_bot_bg_home.png) no-repeat center 0;max-width:none;_width:auto;}
.topblock{padding:12px 12px 0 4px;}
.nav{width:210px;float:left;position:relative;z-index:101;}
.nav .allcate{left:0;}
.nav .allcate a{display:block;width:210px;height:58px;background:url(../images/v5_main_img.png) no-repeat 0px -173px;text-indent:-9999px;}
.topblock .colr{width:971px;float:left;margin-left:13px;}
.topblock .smarteraccount{float:right;padding:9px 0;}
.topblock .smarteraccount a{display:block;float:left;margin:0 5px;width:135px;height:51px;background:url(../images/v5_main_img.png) no-repeat 0 -324px;text-indent:-9999px;}
.topblock .smarteraccount a.login{background-position:0 -324px;}
.topblock .smarteraccount a.register{background-position:-145px -322px;}
.topblock .logined{float:right;width:265px;height:32px;line-height:16px;padding:14px 10px;background:#e9fac3 url(../images/v5_repeat_x.png) repeat-x 0px -837px;margin-bottom:6px;border-right:#dbf4a0 1px solid;border-bottom:#dbf4a0 1px solid;}
.topblock .logined strong{color:#c00;}
.topblock .logined p{padding:5px 0 0 0;color:#a4a4a4;}
分享到QQ
分享到微博
微信扫一扫
