以下是 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=gb2312">
<title>基于jquery的多级下拉导航菜单代码</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/ebadusmenu.css" />
<script type="text/javascript" src="js/ebadusmenu.js"></script>
<script type="text/javascript">
//ebadusmenu.definemenu("anchorid", "menuid", "mouseover|click")
ebadusmenu.definemenu("badumenusel", "badumenu1", "mouseover")
ebadusmenu.definemenu("badumenusel1", "badumenu2", "mouseover")
ebadusmenu.definemenu("badumenusel2", "badumenu3", "mouseover")
ebadusmenu.definemenu("badumenusel3", "badumenu4", "mouseover")
ebadusmenu.definemenu("badumenusel4", "badumenu5", "mouseover")
ebadusmenu.definemenu("badumenusel5", "badumenu6", "mouseover")
ebadusmenu.definemenu("badumenusel6", "badumenu7", "mouseover")
</script>
</head>
<body oncontextmenu='return false' ondragstart='return false'>
<div id="headerb">
<div class="hdright">
<div class="hdrow">
<ul id="ebadu_nav" class="ebadu_nav">
<li>
<a href="#">
网站首页
</a>
</li>
<span class="sep">
|
</span>
<li>
<a href="#" id="badumenusel">
基础业务
</a>
</li>
<span class="sep">
|
</span>
<li class="current">
<a href="#" id="badumenusel1">
云主机
</a>
</li>
<span class="sep">
|
</span>
<li>
<a href="#" id="badumenusel2">
数据中心
</a>
</li>
<span class="sep">
|
</span>
<li>
<a href="#" id="badumenusel3">
CDN
</a>
</li>
<span class="sep">
|
</span>
<li>
<a href="#" id="badumenusel4">
服务中心
</a>
</li>
<span class="sep">
|
</span>
<li>
<a href="#" id="badumenusel5">
网络应用
</a>
</li>
<span class="sep">
|
</span>
<li>
<a href="#" id="badumenusel6">
关于我们
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="badumenu1" class="cssbadumenu">
<div class="jjt">
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
域名注册
<span>
Domain»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
英文域名(En)
</a>
</li>
<li>
<a href="#">
中文域名(Cn)
</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
云虚拟主机
<span>
Host»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
ASP云空间
</a>
</li>
<li>
<a href="#">
PHP云空间
</a>
</li>
<li>
<a href="#">
NET云空间
</a>
</li>
<li>
<a href="#">
JSP云空间
</a>
</li>
<li>
<a href="#">
香港云空间
</a>
</li>
<li>
<a href="#">
美国云空间
</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
企业邮局
<span>
Mail»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
云邮 A型
</a>
</li>
<li>
<a href="#">
云邮 B型
</a>
</li>
<li>
<a href="#">
云邮 C型
</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
帮助中心
<span>
Help»
</span>
</a>
</h3>
<ul>
<li>
<a href="y_help.asp?seeid=2">
主机帮助
</a>
</li>
<li>
<a href="y_help.asp?seeid=1">
域名相关帮助
</a>
</li>
<!--<li>
<a href="#">
如何购买
</a>
</li>
<li>
<a href="#">
如何购买续费
</a>
</li>
<li>
<a href="#">
代理专区
</a>
</li>-->
</ul>
</div>
<div class="column none">
<h3 class="navt">
<a href="#" target="_blank">
客服中心
<span>
Server»
</span>
</a>
</h3>
<ul>
<li>
QQ:88888888
</li>
<li>
电话:0592-88888888
</li>
</ul>
</div>
</div>
<div id="badumenu2" class="cssbadumenu">
<div class="jjta">
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
云主机
<span>
Cloud»
</span>
</a>
</h3>
<ul>
<li>
<a href="dx.html">
电信云(Tele)
</a>
</li>
<li>
<a href="sx.html">
双线云(CT)
</a>
</li>
<li>
<a href="hk.html">
香港云(HK)
</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
网站云
<span>
Web Cloud»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
Discuz云
</a>
</li>
<li>
<a href="#">
DedeCms云
</a>
</li>
<li>
<a href="#">
Phpwind云
</a>
</li>
<li>
<a href="#">
Phpcms云
</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
云分发
<span>
Quality»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
云分发主机
</a>
</li>
<li>
<a href="#">
产品特点
</a>
</li>
<li>
<a href="#">
产品价格
</a>
</li>
<li>
<a href="#">
客户案例
</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
私有云</a>│<a href="#">弹性云<span>
»
</span></a>
</h3>
<ul>
<li>
<a href="#">
弹性云计算
</a>
</li>
<li>
<a href="#">
私有云计算
</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
云优势
<span>
Cloud»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
为什么购买
</a>
</li>
<li>
<a href="#">
与VPS的区别
</a>
</li>
</ul>
</div>
<div class="column none">
<h3 class="navt">
<a href="#" target="_blank">
客服中心
<span>
Services»
</span>
</a>
</h3>
<ul>
<li>
QQ:8888888
</li>
<li>
电话:0592-88888888
</li>
</ul>
</div>
</div>
<div id="badumenu3" class="cssbadumenu">
<div class="jjtb">
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
IDC产品
<span>
Products»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
服务器租用
</a>
</li>
<li>
<a href="#">
服务器托管
</a>
</li>
<li>
<a href="#">
机柜批发
</a>
</li>
<li>
<a href="#">
大带宽租赁
</a>
</li>
</ul>
</div>
<div class="columnfour">
<h3 class="navt">
<a href="#" target="_blank">
VIP产品
<span>
VIP»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
VIP服务器租用
</a>
</li>
<li>
<a href="#">
VIP服务器托管
</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
数据中心
<span>
Infos»
</span>
</a>
</h3>
<ul>
<li>
<a href="#" target="_blank">
蚌埠电信机房
</a>
</li>
<li>
<a href="#" target="_blank">
天长电信机房
</a>
</li>
<li>
<a href="#">
铜陵联通机房
</a>
</li>
<li>
<a href="#">
天长双线机房
</a>
</li>
<li>
<a href="#">
香港新世界机房
</a>
</li>
</ul>
</div>
<div class="column none">
<h3 class="navt">
<a href="#" target="_blank">
客服中心
<span>
Services»
</span>
</a>
</h3>
<ul>
<li>
QQ:88888888
</li>
<li>
电话:0592-8888888
</li>
</ul>
</div>
</div>
<div id="badumenu4" class="cssbadumenu">
<div class="jjtc">
</div>
<div class="columnthree">
<h3 class="navt">
<a href="#" target="_blank">
CDN服务
<span>
Services»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
应用加速服务
</a>
</li>
<li>
<a href="#">
流媒体加速服务
</a>
</li>
<li>
<a href="#">
文件传输加速服务
</a>
</li>
<li>
<a href="#">
页面内容加速服务
</a>
</li>
</ul>
</div>
<div class="columnthree cccc">
<h3 class="navt">
<a href="#" target="_blank">
网站解决方案
<span>
Solution»
</span>
</a>
</h3>
<ul class="twoo">
<li>
<a href="#">
企业类网站
</a>
</li>
<li>
<a href="#">
政府类网站
</a>
</li>
<li>
<a href="#">
金融类网站
</a>
</li>
<li>
<a href="#">
社交类网站
</a>
</li>
<li>
<a href="#">
游戏类网站
</a>
</li>
<li>
<a href="#">
广播电视类网站
</a>
</li>
<li>
<a href="#">
新闻媒体类网站
</a>
</li>
<li>
<a href="#">
电子商务类网站
</a>
</li>
<li>
<a href="#">
综合类门户网站
</a>
</li>
<li>
<a href="#">
视频音频类网站
</a>
</li>
<li>
<a href="#">
软件服务类网站
</a>
</li>
<li>
<a href="#">
远程教育类网站
</a>
</li>
</ul>
</div>
<div class="column none">
<h3 class="navt">
<a href="#" target="_blank">
客服中心
<span>
Server»
</span>
</a>
</h3>
<ul>
<li>
QQ:88888888
</li>
<li>
电话:0592-88888888
</li>
</ul>
</div>
</div>
<div id="badumenu5" class="cssbadumenu">
<div class="jjtd">
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
保姆服务
<span>
Baomu»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
什么是保姆服务
</a>
</li>
<li>
<a href="#">
保姆服务类型
</a>
</li>
<li>
<a href="#">
保姆服务收费标准
</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
服务方式
<span>
Service»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
有问必答
</a>
</li>
<li>
<a href="#">
联系我们
</a>
</li>
<li>
<a href="#" target="_blank">
帮助中心
</a>
</li>
<li>
<a href="#">
投诉中心
</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
购买和支付
<span>
Pay»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
产品价格总览
</a>
</li>
<li>
<a href="#">
付款方式
</a>
</li>
</ul>
</div>
<div class="column none">
<h3 class="navt">
<a href="#" target="_blank">
客服中心
<span>
Server»
</span>
</a>
</h3>
<ul>
<li>
QQ:97028065
</li>
<li>
电话:0551-4202217
</li>
</ul>
</div>
</div>
<div id="badumenu6" class="cssbadumenu">
<div class="jjtg">
</div>
<div class="column" style="width:170px;">
<h3 class="navt">
<a href="#" target="_blank">
网络应用
<span>
App»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
云信通
</a>
</li>
<li>
<a href="#">
音信通
</a>
</li>
<li>
<a href="#">
主机应用
</a>
</li>
</ul>
</div>
<div class="column none">
<h3 class="navt">
<a href="#" target="_blank">
客服中心
<span>
Server»
</span>
</a>
</h3>
<ul>
<li>
QQ:88888888
</li>
<li>
电话:0592-88888888
</li>
</ul>
</div>
</div>
<div id="badumenu7" class="cssbadumenu">
<div class="jjtf">
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
我们是谁
<span>
Who»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
关于我们
</a>
</li>
<li>
<a href="#" target="_blank">
公司环境
</a>
</li>
<li>
<a href="#">
公司资质
</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
里程碑
<span>
History»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
公司荣誉
</a>
</li>
<li>
<a href="#">
公司历程
</a>
</li>
<li>
<a href="#">
LOGO释义
</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
公司品牌
<span>
Brand»
</span>
</a>
</h3>
<ul>
<li>
<a href="#" target="_blank">
公司视角
</a>
</li>
<li>
<a href="#" target="_blank">
每周专题
</a>
</li>
<li>
<a href="#" target="_blank">
公司团队
</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="navt">
<a href="#" target="_blank">
招聘与联系
<span>
Job»
</span>
</a>
</h3>
<ul>
<li>
<a href="#">
加入我们
</a>
</li>
<li>
<a href="#">
联系我们
</a>
</li>
</ul>
</div>
<div class="column none">
<h3 class="navt">
<a href="#" target="_blank">
客服中心
<span>
Server»
</span>
</a>
</h3>
<ul>
<li>
QQ:88888888
</li>
<li>
电话:0592-5245852
</li>
</ul>
</div>
</div>
</body>
</html>
JS代码(ebadusmenu.js):
jQuery.noConflict();
var ebadusmenu={
effectduration:0,//���ֶ�����ʱ�� ����delaytimer:200,//�˵�����ʱ�� ����//���ﲻҪ�༭badugmenulabels:[],badugmenus:[],zIndexVal:1000,//�� z-index ����ʾ�����˵�$shimobj:null,addshim:function($){
$(document.getElementById("headerb")).append('<IFRAME id="outlineiframeshim" src="'+(location.protocol=="https:"? 'blank.htm':'about:blank')+'" style="display:none;
left:0;
top:0;
z-index:999;
position:absolute;
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')this.$shimobj=$("#outlineiframeshim")}
,alignmenu:function($,e,badugmenu_pos){
var badugmenu=this.badugmenus[badugmenu_pos]var $anchor=badugmenu.$anchorobjvar $menu=badugmenu.$menuobjvar menuleft=($(window).width()-(badugmenu.offsetx-$(document).scrollLeft())>badugmenu.actualwidth)? badugmenu.offsetx:badugmenu.offsetx-badugmenu.actualwidth+badugmenu.anchorwidth //��ȡ�˵�������//var menutop=($(window).height()-(badugmenu.offsety-$(document).scrollTop()+badugmenu.anchorheight)>badugmenu.actualheight)? badugmenu.offsety+badugmenu.anchorheight:badugmenu.offsety-badugmenu.actualheight//var menutop=badugmenu.offsety+badugmenu.anchorheight //��ȡ�˵���yֵ//$menu.css({
left:menuleft+"px",top:menutop+"px"}
)//this.$shimobj.css({
width:badugmenu.actualwidth+"px",height:badugmenu.actualheight+"px",left:menuleft+"px",top:menutop+"px",display:"block"}
)}
,showmenu:function(e,badugmenu_pos){
var badugmenu=this.badugmenus[badugmenu_pos]var $menu=badugmenu.$menuobjvar $menuinner=badugmenu.$menuinnerif ($menu.css("display")=="none"){
this.alignmenu(jQuery,e,badugmenu_pos)$menu.css("z-index",++this.zIndexVal)$menu.show(this.effectduration,function(){
$menuinner.css('visibility','visible')}
)}
else if ($menu.css("display")=="block" && e.type=="click"){
//����˵������صģ�����һ��"���"�¼�����"����뿪״̬"��this.hidemenu(e,badugmenu_pos)}
return false}
,hidemenu:function(e,badugmenu_pos){
var badugmenu=this.badugmenus[badugmenu_pos]var $menu=badugmenu.$menuobjvar $menuinner=badugmenu.$menuinner$menuinner.css('visibility','hidden')this.$shimobj.css({
display:"none",left:0,top:0}
)$menu.hide(this.effectduration)}
,definemenu:function(anchorid,menuid,revealtype){
this.badugmenulabels.push([anchorid,menuid,revealtype])}
,render:function($){
for (var i=0,labels=this.badugmenulabels[i];
i<this.badugmenulabels.length;
i++,labels=this.badugmenulabels[i]){
if ($('#'+labels[0]).length!=1 || $('#'+labels[1]).length!=1) //������Ԫ�ز���ȷ��ʱ�����returnthis.badugmenus.push({
$anchorobj:$("#"+labels[0]),$menuobj:$("#"+labels[1]),$menuinner:$("#"+labels[1]).children('ul:first-child'),revealtype:labels[2],hidetimer:null}
)var badugmenu=this.badugmenus[i]badugmenu.$anchorobj.add(badugmenu.$menuobj).attr("_badugmenupos",i+"pos") //��ס�����˵�����ʷbadugmenu.actualwidth=badugmenu.$menuobj.outerWidth()badugmenu.actualheight=badugmenu.$menuobj.outerHeight()badugmenu.offsetx=badugmenu.$anchorobj.offset().leftbadugmenu.offsety=badugmenu.$anchorobj.offset().topbadugmenu.anchorwidth=badugmenu.$anchorobj.outerWidth()badugmenu.anchorheight=badugmenu.$anchorobj.outerHeight()$(document.getElementById("headerb")).append(badugmenu.$menuobj) //�����˵��ƶ�����badugmenu.$menuobj.css("z-index",++this.zIndexVal).hide()badugmenu.$menuinner.css("visibility","hidden")badugmenu.$anchorobj.bind(badugmenu.revealtype=="click"? "click":"mouseenter",function(e){
var menuinfo=ebadusmenu.badugmenus[parseInt(this.getAttribute("_badugmenupos"))]clearTimeout(menuinfo.hidetimer)return ebadusmenu.showmenu(e,parseInt(this.getAttribute("_badugmenupos")))}
)badugmenu.$anchorobj.bind("mouseleave",function(e){
var menuinfo=ebadusmenu.badugmenus[parseInt(this.getAttribute("_badugmenupos"))]if (e.relatedTarget!=menuinfo.$menuobj.get(0) && $(e.relatedTarget).parents("#"+menuinfo.$menuobj.get(0).id).length==0){
//��������û�н��������˵�����menuinfo.hidetimer=setTimeout(function(){
//����ӳ���ʾ�����ز˵�ebadusmenu.hidemenu(e,parseInt(menuinfo.$menuobj.get(0).getAttribute("_badugmenupos")))}
,ebadusmenu.delaytimer)}
}
)badugmenu.$menuobj.bind("mouseenter",function(e){
var menuinfo=ebadusmenu.badugmenus[parseInt(this.getAttribute("_badugmenupos"))]clearTimeout(menuinfo.hidetimer)}
)badugmenu.$menuobj.bind("click mouseleave",function(e){
var menuinfo=ebadusmenu.badugmenus[parseInt(this.getAttribute("_badugmenupos"))]menuinfo.hidetimer=setTimeout(function(){
ebadusmenu.hidemenu(e,parseInt(menuinfo.$menuobj.get(0).getAttribute("_badugmenupos")))}
,ebadusmenu.delaytimer)}
)}
//endif(/Safari/i.test(navigator.userAgent)){
//if Safari$(window).bind("resize load",function(){
for (var i=0;
i<ebadusmenu.badugmenus.length;
i++){
var badugmenu=ebadusmenu.badugmenus[i]var $anchorisimg=(badugmenu.$anchorobj.children().length==1 && badugmenu.$anchorobj.children().eq(0).is('img'))? badugmenu.$anchorobj.children().eq(0):nullif ($anchorisimg){
//ʹ�ô˲˵��뱣���Ȩ��Ϣ http://www.ebadu.netbadugmenu.offsetx=$anchorisimg.offset().leftbadugmenu.offsety=$anchorisimg.offset().topbadugmenu.anchorwidth=$anchorisimg.width()badugmenu.anchorheight=$anchorisimg.height()}
}
}
)}
else{
$(window).bind("resize",function(){
for (var i=0;
i<ebadusmenu.badugmenus.length;
i++){
var badugmenu=ebadusmenu.badugmenus[i]badugmenu.offsetx=badugmenu.$anchorobj.offset().leftbadugmenu.offsety=badugmenu.$anchorobj.offset().top}
}
)}
ebadusmenu.addshim($)}
}
jQuery(document).ready(function($){
ebadusmenu.render($)}
)CSS代码(ebadusmenu.css):
/*************************************************** **************************************************/
/************************************************ ������ʽ ************************************************/
/*************************************************** **************************************************/
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-family:'microsoft yahei',Arial,Tahoma,Geneva,sans-serif,'Helvetica';}
ol,li,iframe{list-style:none}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
caption,th{text-align:left}
q:before,q:after,blockquote:before,blockquote:after{content:""}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
textarea{overflow:auto;vertical-align:top}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}
html,body{height:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%}
body{min-width:980px;font:12px/1.2 'microsoft yahei',helvetica,tahoma,arial,\5b8b\4f53;color:#444;background-color:#fff;}
input,select,textarea{font:12px/1.2 'microsoft yahei',helvetica,tahoma,arial,\5b8b\4f53}
.idc3_t{font-size:14px;font-weight:bold;padding:10px;}
/*************************************************** **************************************************/
/************************************************ �� �� ************************************************/
/*************************************************** **************************************************/
sup{vertical-align:text-top;}
/* ���ã����ٶ��иߵ�Ӱ�� */
sub{vertical-align:text-bottom;}
/** ���ñ��Ԫ�� **/
legend{color:#000;}
/* for ie6 */
/*��ֹ���*/
/*div{overflow:hidden;IE6}
*/
/** ������� **/
.layout:after{content:'\20';display:block;height:0;clear:both;}
.layout{*zoom:1;}
/* ��ʾ ���� */
.db{display:block;}
.dn{display:none;}
.jt-invisible{visibility:hidden;}
/* inline block */
.jt-inline-block{display:inline-block;*display:inline;}
.blank15{clear:both;height:15px;overflow:hidden;display:block;}
.blank9{clear:both;height:9px;overflow:hidden;display:block;}
.blank12{clear:both;height:12px;overflow:hidden;display:block;}
/* ������ʽ */
.dis{display:none}
.left{float:left}
.right{float:right}
.fr{float:right;}
.fl{float:left;}
.clear{clear:both}
.red{color:#cd0000;}
.boder1px{border:1px solid #F09A00}
.position_rel{position:relative}
del{font-family:georgia}
.hg{line-height:24px;}
a{text-decoration:none;color:#666;cursor:pointer;}
#top,headerb,#banner,#container_1,#container_2,container2,container1,#ym_text,#about_text,.foot{width:980px;margin:0 auto;}
/*************************************************** **************************************************/
/************************************************ �˶�ͷ��+���� ************************************************/
/*************************************************** **************************************************/
#headerb{padding:20px 0 0px;font:13px/15px Arial,Helvetica,sans-serif;margin-bottom:0px;height:75px;width:980px;margin:0 auto;position:relative;z-index:9}
.hdright{}
.mail{position:absolute;right:10px}
.mail a{color:#dd8318;}
.hdrow{width:100%;position:absolute;right:-10px;top:40px;}
.logob{float:left;width:218px;}
.logob a{display:block;}
.toplogin{padding:20px;}
.toplogin h3{}
.toplogin p{margin-top:10px;float:left;height:30px;line-height:30px;font-size:16px;font-family:'microsoft yahei',Tahoma,Geneva,sans-serif;font-weight:600}
.toplogin span{width:80px;float:left;}
.toplogin p input{height:30px;line-height:30px;}
.toplogin .label{width:15px;height:15px;vertical-align:middle}
.toplogin .login{border:0;background:#39F;color:#fff;padding:2px 10px;}
.toplogin p a{color:#F60;font-weight:200;font-size:14px;}
li.current a{color:#00b5f7;cursor:pointer;}
li.current a:hover{color:#00b5f7;cursor:pointer;}
.ebadu_nav li a:hover,.ebadu_nav li a:active{border:none;color:#00B5F7;text-decoration:none;}
.ebadu_nav .sep{padding-top:13px;font-size:10px;color:#aeadad;float:left;height:20px;border-top:none;}
.ebadu_nav{position:relative;height:28px;float:right;}
.ebadu_nav .current{color:#008ace;}
.ebadu_nav .current a{color:#008ace;background:url(../images/b_slider.gif) center bottom no-repeat;}
.ebadu_nav li{float:left;list-style:none;padding-bottom:11px;}
.ebadu_nav li.back{background:url(../images/b_slider.gif) center bottom no-repeat;width:120px;margin-left:-1px;height:28px;z-index:8;position:absolute;}
.ebadu_nav li a{font:bold 14px arial;text-decoration:none;color:#303030;outline:none;text-align:center;top:6px;letter-spacing:0;z-index:10;display:block;float:left;height:28px;position:relative;overflow:hidden;padding:5px 20px 0 17px;font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif,"����";font-weight:normal;font-size:13px;}
.ebadu_nav li a:hover{color:#008ace;background:url(../images/b_slider.gif) center bottom no-repeat;}
.sed_nav{display:none;z-index:100;top:40px;position:absolute;background-color:#CCC;filter:alpha(opacity=90);-moz-opacity:0.8;opacity:0.8;}
.sed_nav .navlay{background:#FFF;padding:5px;}
.sed_nav li{float:left;}
.sed_nav li a{display:block;float:none;font-size:12px;height:20px;background:#FFF;filter:alpha(opacity=99);-moz-opacity:0.99;opacity:0.99;}
/*************************************************** **************************************************/
/************************************************ ������ʽ ************************************************/
/*************************************************** **************************************************/
.cssbadumenu{position:absolute;display:none;top:85px;right:0;margin:10px auto;background:white;border:1px solid #ececec;border-width:1px 1px 1px 1px;padding:0px;font:normal 12px Verdana;/*filter:alpha(opacity=97);*/
-moz-opacity:0.97;opacity:0.97;/*box-shadow:0 0 8px 2px rgba(0,0,0,0.4);-moz-box-shadow:0 0 8px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 4px 2px rgba(0,0,0,0.8)*/
}
.jjt{background:url(../images/sps1.png) no-repeat;background-position:0px -30px;width:16px;height:8px;position:absolute;left:255px;top:-8px;z-index:9999;}
.cssbadumenu .jjta{background:url(../images/sps1.png) no-repeat;background-position:0px -30px;width:16px;height:8px;position:absolute;left:504px;top:-8px;z-index:79;}
.cssbadumenu .jjtb{background:url(../images/sps1.png) no-repeat;background-position:0px -30px;width:16px;height:8px;position:absolute;left:264px;top:-8px;z-index:79;}
.cssbadumenu .jjtc{background:url(../images/sps1.png) no-repeat;background-position:0px -30px;width:16px;height:8px;position:absolute;left:336px;top:-8px;z-index:79;}
.cssbadumenu .jjtd{background:url(../images/sps1.png) no-repeat;background-position:0px -30px;width:16px;height:8px;position:absolute;left:425px;top:-8px;z-index:79;}
.cssbadumenu .jjte{background:url(../images/sps1.png) no-repeat;background-position:0px -30px;width:16px;height:8px;position:absolute;left:325px;top:-8px;z-index:79;}
.cssbadumenu .jjtf{background:url(../images/sps1.png) no-repeat;background-position:0px -30px;width:16px;height:8px;position:absolute;left:772px;top:-8px;z-index:79;}
.cssbadumenu .jjtg{background:url(../images/sps1.png) no-repeat;background-position:0px -30px;width:16px;height:8px;position:absolute;left:526px;top:-8px;z-index:79;}
.cssbadumenu .column.none{border:0;margin-right:0px;background:#FFFBEE}
.cssbadumenu .column.app{width:110px;}
.cssbadumenu .column{float:left;width:137px;/*width of each menu column*/
height:266px;padding-left:12px;border-right:#F3F3F3 1px solid;padding-right:13px;padding-top:20px;}
.cssbadumenu .column:hover{background-image:-moz-linear-gradient(top,#f9f9f9,#ffffff);/* Firefox */
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f9f9f9),color-stop(1,#ffffff));/* Saf4+,Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9',endColorstr='#ffffff',GradientType='0');/* IE*/
}
.cssbadumenu .column ul{margin:0;padding:10px 10px 10px 5px;font-size:14px;list-style-type:none;}
.cssbadumenu .column h3{background:#00a7f2;font:bold 14px 'microsoft yahei',Arial;margin:0 0 5px 0;padding:5px 5px 5px 10px;color:#FFF;}
.cssbadumenu .column h3 a{color:#FFF}
.cssbadumenu .column h3 a:hover{color:#f4f100}
.cssbadumenu .column h3 span{color:#F9F9F9;margin-left:6px;font-family:"Lucida Grande",Tahoma;font-weight:normal;font-size:12px;}
.cssbadumenu .column ul li{background:url(../images/lists.png) no-repeat left center;padding-left:10px;background-position:0 -21px;line-height:20px;margin-bottom:10px;font-size:12px;}
.cssbadumenu .column ul li a{color:#8E8E8E;padding:5px 0 2px 0;}
.cssbadumenu .column ul li a:hover{color:#008ACE;border-bottom:#09F 2px solid;}
.cssbadumenu .columnthree.none{border:0;margin-right:0px;}
.cssbadumenu .columnthree{float:left;width:150px;/*width of each menu column*/
height:266px;padding-left:12px;border-right:#F3F3F3 1px solid;padding-right:13px;padding-top:20px;}
.cssbadumenu .columnthree.cccc{width:280px;}
.cssbadumenu .columnthree:hover{background-image:-moz-linear-gradient(top,#f9f9f9,#ffffff);/* Firefox */
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f9f9f9),color-stop(1,#ffffff));/* Saf4+,Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9',endColorstr='#ffffff',GradientType='0');/* IE*/
}
.cssbadumenu .columnthree ul{margin:0;padding:10px;font-size:14px;list-style-type:none;width:200px;}
.cssbadumenu .columnthree h3{background:#00a7f2;font:bold 14px 'microsoft yahei',Arial;margin:0 0 5px 0;padding:5px 10px 5px 15px;color:#FFF}
.cssbadumenu .columnthree h3 a{color:#FFF}
.cssbadumenu .columnthree h3 a:hover{color:#f4f100}
.cssbadumenu .columnthree h3 span{color:#F9F9F9;margin-left:6px;font-family:"microsoft yahei","Lucida Grande",Tahoma;font-weight:normal;font-size:12px;}
.cssbadumenu .columnthree ul li{background:url(../images/lists.png) no-repeat left center;padding-left:17px;background-position:0 -21px;line-height:20px;margin-bottom:10px;}
.cssbadumenu .columnthree ul li a{color:#666;padding:5px 5px 2px 0;font-size:12px;color:#8E8E8E;}
.cssbadumenu .columnthree ul li a:hover{color:#008ACE;border-bottom:#09F 2px solid;}
.cssbadumenu .columnthree .twoo{margin:0;padding:10px;font-size:14px;list-style-type:none;width:300px;}
.cssbadumenu .columnthree .twoo li{background:url(../images/lists.png) no-repeat left center;padding-left:17px;background-position:0 -21px;line-height:20px;margin-bottom:10px;float:left;margin-right:10px;width:110px;}
.cssbadumenu .columnthree .twoo li a{color:#8E8E8E;padding:5px 5px 2px 0;font-size:12px;}
.cssbadumenu .columnthree .twoo li a:hover{color:#008ACE;border-bottom:#09F 2px solid;}
.cssbadumenu .columnfour.none{border:0;margin-right:0px;}
.cssbadumenu .columnfour{float:left;width:140px;/*width of each menu column*/
height:266px;padding-left:12px;border-right:#F3F3F3 1px solid;padding-right:13px;padding-top:20px;}
.cssbadumenu .columnfour:hover{background-image:-moz-linear-gradient(top,#f9f9f9,#ffffff);/* Firefox */
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f9f9f9),color-stop(1,#ffffff));/* Saf4+,Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9',endColorstr='#ffffff',GradientType='0');/* IE*/
}
.cssbadumenu .columnfour ul{margin:0;padding:10px;font-size:14px;list-style-type:none;width:200px;}
.cssbadumenu .columnfour h3{background:#00a7f2;font:bold 14px 'microsoft yahei',Arial;margin:0 0 5px 0;padding:5px 10px 5px 15px;color:#FFF}
.cssbadumenu .columnfour h3 a{color:#FFF}
.cssbadumenu .columnfour h3 a:hover{color:#f4f100}
.cssbadumenu .columnfour h3 span{color:#F9F9F9;font-family:"microsoft yahei","Lucida Grande",Tahoma;font-weight:normal;font-size:12px;}
.cssbadumenu .columnfour ul li{background:url(../images/lists.png) no-repeat left center;padding-left:17px;background-position:0 -21px;line-height:20px;margin-bottom:10px;font-size:12px;}
.cssbadumenu .columnfour ul li a{color:#8E8E8E;padding:5px 5px 2px 0;}
.cssbadumenu .columnfour ul li a:hover{color:#008ACE;border-bottom:#09F 2px solid;}
分享到QQ
分享到微博
微信扫一扫
