以下是 21CN官网jQuery导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/zzsc.css" rel="stylesheet" type="text/css" />
<title>21CN官网jQuery导航</title>
<base target="_blank">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<br>
<div class="topbarbg">
<div id="topbar" class="area">
<div class="site-login" id="J_login_update_panel"></div></div>
<div class="headerbg">
<div class="area clearfix" id="header">
<h1><img width="36" height="36" src="css/chinaz_logo.png" class="msPinSite"></h1>
<!--导航-->
<ul id="nav">
<li class="nav-item"><a href="http://www.baidu.com/?" class="nav-link">新闻</a>
<div class="nav-dropdown" style="display: none">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="http://www.baidu.com/">
中方不接受日本所谓“抗议” 称琉球是学术问题</a></li>
<li><a href="http://www.baidu.com/?hot/cn/a/2013/0510/09/21562265.shtml">
河南在2010年“赵作海案”后翻错案释放116人</a></li>
<li><a href="http://www.baidu.com/?domestic/yaowen/a/2013/0510/05/21556654.shtml">
全国留守流动儿童将近1亿 仍在逐年扩大</a></li>
<li><a href="http://www.baidu.com/?domestic/yaowen/a/2013/0510/03/21555614.shtml">
学者：环保问题难解决因地方政将经济放环保之前</a></li>
<li><a href="http://www.baidu.com/?hot/cn/a/2013/0509/13/21543382.shtml">
高三男生恋爱16次均告吹 母亲严令找北京女生</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="http://www.baidu.com/?">
进入新闻频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="http://www.baidu.com/?domestic/index.shtml">国内</a></li>
<li><a href="http://www.baidu.com/?world/">国际</a></li>
<li><a href="http://www.baidu.com/?social/">社会</a></li>
<li><a href="http://www.baidu.com/?">军事</a></li>
<li><a href="http://www.baidu.com/?history/">历史</a></li>
<li><a href="http://www.baidu.com/?today/">评论</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="http://www.baidu.com/?" class="nav-link">军事</a>
<div class="nav-dropdown" style="display: none;">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="http://www.baidu.com/?jiaodian/a/2013/0510/09/21562477.shtml">
菲律宾射杀1名台湾船员 中方严厉谴责要求彻查</a></li>
<li><a href="http://www.baidu.com/?jiaodian/a/2013/0510/09/21562781.shtml">
菲律宾军舰扫射屠杀中国渔民 疯狂追赶1小时</a></li>
<li><a href="http://www.baidu.com/?jiaodian/a/2013/0510/10/21563278.shtml">
台“立委”：应宣布将进台海域菲船一律击沉</a></li>
<li><a href="http://www.baidu.com/?jiaodian/a/2013/0510/10/21563723.shtml">
日媒臆想中日激战钓鱼岛海域 击沉辽宁号航母</a></li>
<li><a href="http://www.baidu.com/?jiaodian/a/2013/0510/09/21562652.shtml">
中国同时研制量产7型潜艇军舰 美军已无必胜信心</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="http://www.baidu.com/?">
进入军事频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="http://www.baidu.com/?jiaodian/list1.shtml">焦点</a></li>
<li><a href="http://www.baidu.com/?gn/list1.shtml">国内</a></li>
<li><a href="http://www.baidu.com/?gj/list1.shtml">国际</a></li>
<li><a href="http://www.baidu.com/?pic/list1.shtml">图集</a></li>
<li><a href="http://www.baidu.com">热点</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="http://www.baidu.com/?" class="nav-link">财经</a>
<div class="nav-dropdown" style="display: none;">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="http://www.baidu.com/?news/industry/a/2013/0507/10/21492488.shtml">
中化工被指向加油站卖劣质汽油 2000余车辆受损</a></li>
<li><a href="http://www.baidu.com/?news/industry/a/2013/0507/10/21492420.shtml">
外资集体做空中国被指早有预谋 香港成其大本营</a></li>
<li><a href="http://www.baidu.com/?news/industry/a/2013/0507/09/21492278.shtml">
养老金双轨制遭诟病 事业单位曾试点并轨5年未果</a></li>
<li><a href="http://www.baidu.com/?news/macro/a/2013/0507/09/21492239.shtml">
“国五条”冷却楼市 十房企4月销量明显下滑</a></li>
<li><a href="http://www.baidu.com/?news/industry/a/2013/0507/09/21492385.shtml">
央视曝商贩用鸭肉冒充羊肉 流入品尚豆捞等店</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="http://www.baidu.com/?">
进入财经频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="http://www.baidu.com/?news/cjyw/list1.shtml">要闻</a></li>
<li><a href="http://www.baidu.com/?news/consume/list1.shtml">
消费</a></li>
<li><a href="http://www.baidu.com/?stock/lc/list1.shtml">理财</a></li>
<li><a href="http://www.baidu.com/?news/comments/list1.shtml">
评论</a></li>
<li><a href="http://www.baidu.com/?stock/index.shtml">股票</a></li>
<li><a href="http://www.baidu.com/?stock/hgyj/list1.shtml">宏观</a></li>
<li><a href="http://www.baidu.com/?stock/dpfx/list1.shtml">大盘</a></li>
<li><a href="http://www.baidu.com/?stock/hyfx/list1.shtml">行业</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="http://www.baidu.com/?" class="nav-link">娱乐</a>
<div class="nav-dropdown" style="display: none;">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="http://www.baidu.com/?star/zhuixing/neidi/a/2013/0510/07/21558606.shtml">
张艺谋三子女户口复印件曝光 再婚超生被坐实</a></li>
<li><a href="http://www.baidu.com/?star/zhuixing/gangtai/a/2013/0510/09/21561325.shtml">
罗嘉良被轰世纪贱男获前妻力撑 发声明护声誉</a></li>
<li><a href="http://www.baidu.com/?star/zhuixing/gangtai/a/2013/0510/07/21558890.shtml">
疑胡杏儿情欲短片疯传黄宗泽受牵连 女方斥无聊</a></li>
<li><a href="http://www.baidu.com/?zt/2013/mingxingtiaoshui/">《中国星跳跃》明晚复播 释小龙确定退出节目</a></li>
<li><a href="http://www.baidu.com/?star/zhuixing/gangtai/a/2013/0510/07/21558583.shtml">
郭富城两旧爱同场 熊黛林钟丽缇合影互称不尴尬</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="http://www.baidu.com/?">进入娱乐频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="http://www.baidu.com/?star/">明星</a></li>
<li><a href="http://www.baidu.com/?movie/">电影</a></li>
<li><a href="http://www.baidu.com/?tv/">电视</a></li>
<li><a href="http://www.baidu.com/">音乐</a></li>
<li><a href="http://www.baidu.com/?picture/">图片</a></li>
<li><a href="http://www.baidu.com/?zhuanti/">专题</a></li>
<li><a href="http://www.baidu.com/?weekly/list.shtml">周刊</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="http://www.baidu.com/?" class="nav-link">体育</a>
<div class="nav-dropdown">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="http://www.baidu.com/?basketball/a/2013/0510/08/21559987.shtml">
曝雄鹿首轮更衣室内讧 埃利斯与桑德斯险动拳头</a></li>
<li><a href="http://www.baidu.com/?international/gjd/a/2013/0510/08/21559962.shtml">
国王杯主裁人选出炉 他曾被穆帅怒斥单场13错判</a></li>
<li><a href="http://www.baidu.com/?international/a/2013/0510/08/21559951.shtml">
后弗格森时代谁领风骚？ 曼城核心：轮到我们了</a></li>
<li><a href="http://www.baidu.com/?basketball/a/2013/0510/08/21559923.shtml">
中国新星登上美媒体头条 孟翔宇或成姚明接班人</a></li>
<li><a href="http://www.baidu.com/?basketball/a/2013/0509/08/21535293.shtml">
邱彪十年青春献东莞难割舍 赴浙江因恩师杨学增</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="http://www.baidu.com/?">
进入体育频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="http://www.baidu.com/?international/">国际足球</a></li>
<li><a href="http://www.baidu.com/?zhibo/">直播</a></li>
<li><a href="http://www.baidu.com/?national/">国内</a></li>
<li><a href="http://www.baidu.com/?basketball/nba/">NBA篮球</a></li>
<li><a href="http://www.baidu.com/?basketball/">CBA</a></li>
<li><a href="http://www.baidu.com/?integrate/">综合</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="http://www.baidu.com/?" class="nav-link">科技</a>
<div class="nav-dropdown">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="http://www.baidu.com/?itnews/a/2013/0510/09/21561953.shtml">
传亚马逊正开发高端智能手机 配置裸眼3D显示屏</a></li>
<li><a href="http://www.baidu.com/?discovery/baike/a/2013/0510/09/21561612.shtml">
发泡餐具“解禁” 环保餐具“受伤”</a></li>
<li><a href="http://www.baidu.com/?itroll/a/2013/0510/08/21559928.shtml">
小心！iPad内的磁贴可能会关闭心脏除颤器</a></li>
<li><a href="http://www.baidu.com/?itnews/a/2013/0510/08/21559980.shtml">苹果得偿所愿
法官命令谷歌交出安卓源代码记录</a></li>
<li><a href="http://www.baidu.com/?digi/skill/a/2013/0510/06/21557900.shtml">玩转移轴效果
如何用PS将风景变成缩微景观</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="http://www.baidu.com/?">进入科技频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="http://www.baidu.com/?discovery/">科学</a></li>
<li><a href="http://www.baidu.com/?ec/">电商</a></li>
<li><a href="http://www.baidu.com/?mobile/">手机</a></li>
<li><a href="http://www.baidu.com/?pad/">平板</a></li>
<li><a href="http://www.baidu.com/?jd/">家电</a></li>
<li><a href="http://www.baidu.com/?pc/">电脑</a></li>
<li><a href="http://www.baidu.com/?app/">应用</a></li>
<li><a href="http://www.baidu.com/?tel/">通信</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="http://www.baidu.com/" class="nav-link">汽车</a>
<div class="nav-dropdown">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="http://www.baidu.com">
前4月国产汽车产销双超700万辆 增一成多</a></li>
<li><a href="http://www.baidu.com/?gouche/daogou/a/2013/0510/08/21559581.shtml">
拒绝不专业 25万元以内城市SUV四驱分析</a></li>
<li><a href="http://www.baidu.com/?gouche/daogou/a/2013/0510/08/21559481.shtml">
省油是王道 8万元搭载6AT/CVT车型推荐</a></li>
<li><a href="http://www.baidu.com/?zixun/hangye/a/2013/0510/07/21559313.shtml">
前4月中国汽车出口较前3月增速有所回落</a></li>
<li><a href="http://www.baidu.com/?zixun/zhengce/a/2013/0510/07/21559016.shtml">
广东Ⅳ油每升小涨8分钱 近十年来最小涨幅</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="http://www.baidu.com/?">
进入汽车频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="http://www.baidu.com/?autonews/">新车</a></li>
<li><a href="http://www.baidu.com/?gouche/">购车</a></li>
<li><a href="http://www.baidu.com/?yongche/">用车</a></li>
<li><a href="http://www.baidu.com/?wenhua/shenghuo/">生活</a></li>
<li><a href="http://www.baidu.com/?wenhua/">文化</a></li>
<li><a href="http://www.baidu.com/?photo/">读图</a></li>
<li><a href="http://www.baidu.com/?autovideo/list1.shtml">视频</a></li>
<li><a href="http://www.baidu.com/?zixun/">行业</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="http://www.baidu.com/?" class="nav-link">房产</a>
<div class="nav-dropdown nav-dropdown-align-right">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="http://www.baidu.com/?newhouse/research/a/2013/0510/07/21559343.shtml">
强力限价 5月广州网签楼价将企稳回落</a></li>
<li><a href="http://www.baidu.com/?news/jishi/a/2013/0510/07/21558995.shtml">
四月仅一宗商住用地成交 五月土地市场或触底</a></li>
<li><a href="http://www.baidu.com/?newhouse/helper/a/2013/0510/07/21558983.shtml">
四大行纷调利率优惠 首套房贷利率难见8.5折</a></li>
<li><a href="http://www.baidu.com/?newhouse/research/a/2013/0510/07/21558793.shtml">
五六月广州全市新货1.2万套 刚需产品占六成</a></li>
<li><a href="http://www.baidu.com/?news/look/a/2013/0510/07/21558798.shtml">
“国五条”楼市调控AB面 限得了房价限不住地价？</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="http://www.baidu.com/?">
进入房产频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="http://www.baidu.com/?newhouse/research/">房价</a></li>
<li><a href="http://www.baidu.com/?news/look/list1.shtml">政策</a></li>
<li><a href="http://www.baidu.com/?news/fangqi/">房企</a></li>
<li><a href="http://www.baidu.com/?news/people/">人物</a></li>
<li><a href="http://www.baidu.com/?news/news/list1.shtml">曝光</a></li>
<li><a href="http://www.baidu.com/?news/bagua/list1.shtml">八卦</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="http://www.baidu.com/" class="nav-link">家居</a></li>
<li class="nav-item"><a href="http://www.baidu.com" class="nav-link">教育</a></li>
<li class="nav-item"><a href="http://www.baidu.com/" class="nav-link">游戏</a>
<div class="nav-dropdown nav-dropdown-align-right">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="http://www.baidu.com/?kuso/a/2013/0508/17/21524259.shtml">
韩国23岁残疾电竞玩家Space去世 被誉意志亡灵</a></li>
<li><a href="http://www.baidu.com/?online/news/a/2013/0508/17/21524484.shtml">
《剑网3》“安史之乱”内测开启 九门派武学调整</a></li>
<li><a href="http://www.baidu.com/?online/news/a/2013/0508/17/21524587.shtml">
WCG2013比赛项目初定：LOL入选 DotA2出局</a></li>
<li><a href="http://www.baidu.com/?console/news/a/2013/0508/17/21524731.shtml">EA
2013财报公开 《FIFA 13》销量达1450万</a></li>
<li><a href="http://www.baidu.com/?console/news/a/2013/0507/19/21502774.shtml">
日本大阪美发沙龙惊现杀马特西红柿等非主流发型</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="http://www.baidu.com/?">
进入游戏频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="http://www.baidu.com/?online/">网络游戏</a></li>
<li><a href="http://www.baidu.com/?pcgame/">单机游戏</a></li>
<li><a href="http://www.baidu.com/?console/">电视掌机</a></li>
<li><a href="http://www.baidu.com/?comic/">动漫地带</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="http://www.baidu.com/?" class="nav-link">生活</a>
<div class="nav-dropdown nav-dropdown-align-right">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="http://www.baidu.com/?health/sex/a/2013/0510/09/21562586.shtml">
两性养生：夫妻三大性生活黄金时间</a></li>
<li><a href="http://www.baidu.com/?health/sex/a/2013/0510/09/21562530.shtml">
两性养生:夫妻3种避孕 哪种最伤身?</a></li>
<li><a href="http://www.baidu.com/?bk/a/2013/0510/09/21562037.shtml">
韩国女模脸部整容变成恐怖“电风扇”[多图]</a></li>
<li><a href="http://www.baidu.com/?healthnews/a/2013/0510/09/21562125.shtml">
广东药监局公布不合格药品名单 西南药业再上榜</a></li>
<li><a href="http://www.baidu.com/?health/food/a/2013/0510/09/21562259.shtml">
不可不知 9种食物让女人越吃越老(组图)</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="http://www.baidu.com/?">
进入生活频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="http://www.baidu.com/?humour/">幽默</a></li>
<li><a href="http://www.baidu.com/?news/list1.shtml">生活快报</a></li>
<li><a href="http://www.baidu.com/?health/food/list1.shtml">食疗</a></li>
<li><a href="http://www.baidu.com/?health/sex/list1.shtml">两性</a></li>
<li><a href="http://www.baidu.com/?humour/chat/list1.shtml">奇闻异事</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="http://www.baidu.com/?" class="nav-link">女人</a>
<div class="nav-dropdown nav-dropdown-align-right" style="display: none;">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="http://www.baidu.com/?emotions/social/a/2013/0510/11/21565094.shtml">
河南某村曾用一筐红薯换媳妇 网友叹生不逢时</a></li>
<li><a href="http://www.baidu.com/?fashion/meinv/a/2013/0510/10/21564245.shtml">
日本女主播私生活混乱 被爆与50人有染</a></li>
<li><a href="http://www.baidu.com/?emotions/social/a/2013/0510/11/21565554.shtml">
朝鲜女交警被授英雄称号现场嚎啕大哭</a></li>
<li><a href="http://www.baidu.com/?emotions/social/a/2013/0509/15/21545884.shtml">
女星大尺度喂奶照 show巨乳宣传母乳健康</a></li>
<li><a href="http://www.baidu.com/?emotions/mingren/a/2013/0509/16/21547094.shtml">
罗嘉良要前妻哄现妻 揭秘罗嘉良个人资料</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="http://www.baidu.com/?">
进入女人频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="http://www.baidu.com/?fashion/collocation/">街拍</a></li>
<li><a href="http://www.baidu.com/?beauty/cosmetics/">彩妆</a></li>
<li><a href="http://www.baidu.com/?beauty/slim/">美体</a></li>
<li><a href="http://www.baidu.com/?beauty/skincare">美容</a></li>
<li><a href="http://www.baidu.com/?emotions/social/">世相</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="http://www.baidu.com/" class="nav-link">社区</a></li>
<li class="nav-item"><a href="http://www.baidu.com/" class="nav-link" style="width: 75px;">
聚投诉</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
(function(jq){
jq.fn.dropdown = function(settings){
var defaults = {
dropdownEl: '.dropdown-menu',
openedClass: 'dropdown-open',
delayTime: 100
}
var opts = jq.extend(defaults, settings);
return this.each(function(){
var curObj = null;
var preObj = null;
var openedTimer = null;
var closedTimer = null;
jq(this).hover(function(){
if(openedTimer) clearTimeout(openedTimer);
curObj = jq(this);
openedTimer = setTimeout(function(){
curObj.addClass(opts.openedClass).find(opts.dropdownEl).show();
},opts.delayTime);
preObj = curObj;
},function(){
if(openedTimer) clearTimeout(openedTimer);
openedTimer = setTimeout(function(){
preObj.removeClass(opts.openedClass).find(opts.dropdownEl).hide();
},opts.delayTime);
});
jq(this).bind('click', function(){
if(openedTimer) clearTimeout(openedTimer);
openedTimer = setTimeout(function(){
preObj.removeClass(opts.openedClass).find(opts.dropdownEl).hide();
},opts.delayTime);
});
});
};
})(jQuery);
//下拉菜单
(function(jq) {
//jq('.J_dropdown_widget').dropdown({dropdownEl:'.topbar-dropdown-menu',openedClass:'topbar-dropdown-open'});
jq('#nav .nav-item').dropdown({dropdownEl:'.nav-dropdown',openedClass:'nav-item-open'});
})(jQuery);
</script>
</div>
</body>
</html>
CSS代码(zzsc.css):
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,button,textarea{border:0 none;font:inherit;margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none outside none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse;border-spacing:0}
/*base.css*/
html{background:#FFF}
h1,h2,h3,h4,strong,em{font-weight:700}
em{font-style:normal}
/*common.css*/
.clearfix:after{content:'';display:block;height:0;clear:both;visibility:hidden;overflow:hidden}
.clearfix{zoom:1}
.fl,.fr{display:inline}
.fl{float:left}
.fr{float:right}
.blank8,.blank10,.blank12,.blank14{overflow:hidden;clear:both}
.blank8{height:8px}
.blank10{height:10px}
.blank12{height:12px}
.blank14{height:14px}
.blankW{background:#fff}
.fb{font-weight:700}
.show{display:block}
.hide{display:none}
/*page.css*/
body{font:400 12px/1.5 arial,\5b8b\4f53;-webkit-text-size-adjust:none;}
img,iframe{display:block;}
a{color:#000;text-decoration:none}
a:hover{color:#C90000;text-decoration:underline}
.area{width:980px;margin:0 auto}
.topbarbg,.brandbg,.headerbg{width:100%;min-width:980px}
.topbarbg{height:28px;background:#B60000}
.brandbg{height:74px;background:#CA0000;border-top:1px solid #FF0000}
.areabg{background:url(area_bg.png) repeat-y 0 0}
/*----------new-------------*/
/*--header--*/
.headerbg{height:42px;margin-bottom:12px;background:#efefef url(header.png) repeat-x 0 0}
#header{height:42px}
#header h1{float:left}
#header h1 img{display:block;margin-top:2px;}
#nav{float:right;font-size:16px;font-family:\5FAE\8F6F\96C5\9ED1;}
#nav a:hover{text-decoration:none}
#nav .nav-item,#nav .nav-link{position:relative;float:left;display:block;color:#444;z-index:1000;}
#nav .nav-link{height:40px;margin-left:-1px;line-height:40px;font-weight:700;border:1px solid #dadada;border-top-color:#efefef;border-bottom:none;z-index:999;width:59px;text-align:center;}
#nav .nav-item-open .nav-link{white-space:nowrap;border-bottom:1px solid #fff;color:#ca0000;background:#fbfbfb}
#nav .nav-dropdown{display:none;position:absolute;top:41px;left:-1px;width:480px;height:290px;border:1px solid #dadada;border-bottom:5px solid #c2c2c2;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,0.2);z-index:998}
#nav .nav-dropdown-align-right{left:auto;right:0;_right:-1px}
#nav .nav-dropdown-trending{float:left;width:380px;font-size:16px}
#nav .nav-dropdown-channel{float:right;width:100px;height:290px;font-size:14px;background:#f6f6f6}
#nav .nav-dropdown a:hover{color:#ca0000}
#nav .trending li{height:50px;line-height:50px;font-weight:700;border-bottom:1px dashed #ccc;vertical-align:bottom;overflow:hidden}
#nav .trending li a{display:block;padding-left:25px;color:#1E1E1E;}
#nav .trending li a:hover{background:#f6f6f6}
#nav .nav-dropdown-entry{line-height:34px;margin-left:25px;font-size:14px;}
#nav .nav-dropdown-entry a{display:inline-block;color:#b20000}
#nav .channel{margin-top:16px}
#nav .channel li{line-height:2em}
#nav .channel li a{height:30px;padding-left:24px;line-height:30px;color:#6d6d6d}
分享到QQ
分享到微博
微信扫一扫
