下拉tab菜单1 <mce:style type="text/css"><!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { width:180px; line-height: 24px; list-style-type: none; text-align:left; /*定义整个ul菜单的行高和背景色*/ } /*==================一级目录===================*/ #nav a { width: 160px; display: block; padding-left:20px; /*Width(一定要),否则下面的Li会变形*/ } #nav li { background:#CCC; /*一级目录的背景色*/ border-bottom:#FFF 1px solid; /*下面的一条白边*/ float:left; /*float:left,本不应该设置,但由于在Firefox不能正常显示 继承Nav的width,限制宽度,li自动向下延伸*/ } #nav li a:hover{ background:#CC0000; /*一级目录onMouseOver显示的背景色*/ } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } /*==================二级目录===================*/ #nav li ul { list-style:none; text-align:left; } #nav li ul li{ background: #EBEBEB; /*二级目录的背景色*/ } #nav li ul a{ padding-left:20px; width:160px; /* padding-left二级目录中文字向右移动,但Width必须重新设置=(总宽度-padding-left)*/ } /*下面是二级目录的链接样式*/ #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3; text-decoration:none; font-weight:normal; background:#CC0000; /* 二级onmouseover的字体颜色、背景色*/ } /*==============================*/ #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } #nav ul.collapsed { display: none; } --> #PARENT{ width:300px; padding-left:20px; } --></mce:style><style type="text/css" mce_bogus="1">*{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { width:180px; line-height: 24px; list-style-type: none; text-align:left; /*定义整个ul菜单的行高和背景色*/ } /*==================一级目录===================*/ #nav a { width: 160px; display: block; padding-left:20px; /*Width(一定要),否则下面的Li会变形*/ } #nav li { background:#CCC; /*一级目录的背景色*/ border-bottom:#FFF 1px solid; /*下面的一条白边*/ float:left; /*float:left,本不应该设置,但由于在Firefox不能正常显示 继承Nav的width,限制宽度,li自动向下延伸*/ } #nav li a:hover{ background:#CC0000; /*一级目录onMouseOver显示的背景色*/ } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } /*==================二级目录===================*/ #nav li ul { list-style:none; text-align:left; } #nav li ul li{ background: #EBEBEB; /*二级目录的背景色*/ } #nav li ul a{ padding-left:20px; width:160px; /* padding-left二级目录中文字向右移动,但Width必须重新设置=(总宽度-padding-left)*/ } /*下面是二级目录的链接样式*/ #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3; text-decoration:none; font-weight:normal; background:#CC0000; /* 二级onmouseover的字体颜色、背景色*/ } /*==============================*/ #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } #nav ul.collapsed { display: none; } --> #PARENT{ width:300px; padding-left:20px; }</style> <div id="PARENT"> <ul id="nav"> <li><a href="#Menu=ChildMenu1" mce_href="#Menu=ChildMenu1" οnclick="DoMenu('ChildMenu1')">我的网站</a> <ul id="ChildMenu1" class="collapsed"> <li><a href="#" mce_href="#">网页教学网</a></li> <li><a href="#" mce_href="#">管理</a></li> <li><a href="#" mce_href="#">网页教学网</a></li> <li><a href="#" mce_href="#">管理</a></li> <li><a href="#" mce_href="#">网页教学网</a></li> <li><a href="#" mce_href="#">管理</a></li> </ul> </li> <li><a href="#Menu=ChildMenu2" mce_href="#Menu=ChildMenu2" οnclick="DoMenu('ChildMenu2')">我的帐务</a> <ul id="ChildMenu2" class="collapsed"> <a href="#" mce_href="#">支付</a></li> <li><a href="#" mce_href="#">管理</a></li> <li><a href="#" mce_href="#">网上支付</a></li> <li><a href="#" mce_href="#">登记汇款</a></li> <li><a href="#" mce_href="#">在线招领</a></li> <li><a href="#" mce_href="#">历史帐务</a></li> </ul> </li> <li><a href="#Menu=ChildMenu3" mce_href="#Menu=ChildMenu3" οnclick="DoMenu('ChildMenu3')">网站管理</a> <ul id="ChildMenu3" class="collapsed"> <li><a href="#" mce_href="#">登录</a></li> <a href="#" mce_href="#">管理</a></li> <li><a href="#" mce_href="#">管理</a></li> <li><a href="#" mce_href="#">管理</a></li> </ul> </li> <li><a href="#Menu=ChildMenu4" mce_href="#Menu=ChildMenu4" οnclick="DoMenu('ChildMenu4')">网站管理</a> <ul id="ChildMenu4" class="collapsed"> <li><a href="#" mce_href="#">登录</a></li> <a href="#" mce_href="#">管理</a></li> <li><a href="#" mce_href="#">管理</a></li> <li><a href="#" mce_href="#">管理</a></li> <li><a href="#" mce_href="#">管理</a></li> </ul> </li> </ul> </div> <mce:script type=text/javascript><!-- var LastLeftID = ""; function menuFix() { var obj = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<obj.length; i++) { obj[i].οnmοuseοver=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].οnmοuseοut=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"), ""); } } } function DoMenu(emid) { var obj = document.getElementById(emid); obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded"); if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu { document.getElementById(LastLeftID).className = "collapsed"; } LastLeftID = emid; } function GetMenuID() { var MenuID=""; var _paramStr = new String(window.location.href); var _sharpPos = _paramStr.indexOf("#"); if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1) { _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length); } else { _paramStr = ""; } if (_paramStr.length > 0) { var _paramArr = _paramStr.split("&"); if (_paramArr.length>0) { var _paramKeyVal = _paramArr[0].split("="); if (_paramKeyVal.length>0) { MenuID = _paramKeyVal[1]; } } /* if (_paramArr.length>0) { var _arr = new Array(_paramArr.length); } //取所有#后面的,菜单只需用到Menu //for (var i = 0; i < _paramArr.length; i++) { var _paramKeyVal = _paramArr[i].split('='); if (_paramKeyVal.length>0) { _arr[_paramKeyVal[0]] = _paramKeyVal[1]; } } */ } if(MenuID!="") { DoMenu(MenuID) } } GetMenuID(); //*这两个function的顺序要注意一下,不然在Firefox里GetMenuID()不起效果 menuFix(); // --></mce:script> 下拉tab菜单2 <!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>无标题文档</title> </head> <mce:style type="text/css"><!-- body,div,ul,li,p,h1,h2{ margin:0; padding:0; border:0; background:#FAFAFA; font-family:Arial, Helvetica, sans-serif,"宋体"} body{ text-align:center; font-size:12px} li{ list-style:none} .rolinList{ width:402px; height:auto; margin:20px auto 0 auto; text-align:left} .rolinList li{margin-bottom:1px;border:1px solid #DADADA} .rolinList li h2{ width:380px; height:40px; background:#fff; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer} .content{ height:150px;width:400px; background:#fff; background:#FAFAFA} .content p{ margin:12px} --></mce:style><style type="text/css" mce_bogus="1">body,div,ul,li,p,h1,h2{ margin:0; padding:0; border:0; background:#FAFAFA; font-family:Arial, Helvetica, sans-serif,"宋体"} body{ text-align:center; font-size:12px} li{ list-style:none} .rolinList{ width:402px; height:auto; margin:20px auto 0 auto; text-align:left} .rolinList li{margin-bottom:1px;border:1px solid #DADADA} .rolinList li h2{ width:380px; height:40px; background:#fff; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer} .content{ height:150px;width:400px; background:#fff; background:#FAFAFA} .content p{ margin:12px}</style> <mce:script type="text/javascript"><!-- window.onload = function() { rolinTab("rolin") } function rolinTab(obj) { var list = $(obj).getElementsByTagName("LI"); var state = {show:false,hidden:false,showObj:false}; for (var i=0; i<list.length; i++) { var tmp = new rolinItem(list[i],state); if (i == 0) tmp.pShow(); } } function rolinItem(obj,state) { var speed = 0.0666; var range = 1; var interval; var tarH; var tar = this; var head = getFirstChild(obj); var content = getNextChild(head); var isOpen = false; this.pHidden = function() { if (isOpen) hidden(); } this.pShow = show; var baseH = content.offsetHeight; content.style.display = "none"; var isOpen = false; head.onmouseover = function() { this.style.background = "#EFEFEF"; } head.onmouseout = mouseout; head.onclick = function() { this.style.background = "#EFEFEF"; if (!state.show && !state.hidden) { if (!isOpen) { head.onmouseout = null; show(); } else { hidden(); } } } function mouseout() { this.style.background = "#FFF" } function show() { head.style.borderBottom = "1px solid #DADADA"; state.show = true; if (state.openObj && state.openObj != tar ) { state.openObj.pHidden(); } content.style.height = "0px"; content.style.display = "block"; content.style.overflow = "hidden"; state.openObj = tar; tarH = baseH; interval = setInterval(move,10); } function showS() { isOpen = true; state.show = false; } function hidden() { state.hidden = true; tarH = 0; interval = setInterval(move,10); } function hiddenS() { head.style.borderBottom = "none"; head.onmouseout = mouseout; head.onmouseout(); content.style.display = "none"; isOpen = false; state.hidden = false; } function move() { var dist = (tarH - content.style.height.pxToNum())*speed; if (Math.abs(dist) < 1) dist = dist > 0 ? 1: -1; content.style.height = (content.style.height.pxToNum() + dist) + "px"; if (Math.abs(content.style.height.pxToNum() - tarH) <= range ) { clearInterval(interval); content.style.height = tarH + "px"; if (tarH != 0) { showS() } else { hiddenS(); } } } } var $ = function($) {return document.getElementById($)}; String.prototype.pxToNum = function() {return Number(this.replace("px",""))} function getFirstChild(obj) { var result = obj.firstChild; while (!result.tagName) { result = result.nextSibling; } return result; } function getNextChild(obj) { var result = obj.nextSibling; while (!result.tagName) { result = result.nextSibling; } return result; } // --></mce:script> <body> <ul class="rolinList" id="rolin"> <li> <h2>懒人图库 1</h2> <div class="content"> <p>学会偷懒,并懒出境界是提高工作效率最有效的方法!<br /> <br /> <a href="http://www.lanrentuku.com/" mce_href="http://www.lanrentuku.com/" target="_blank">http://www.lanrentuku.com/</a></p> </div> </li> <li> <h2>懒人图库 2</h2> <div class="content"> <p>学会偷懒,并懒出境界是提高工作效率最有效的方法!<br /> <br /> <a href="http://www.lanrentuku.com/" mce_href="http://www.lanrentuku.com/" target="_blank">http://www.lanrentuku.com/</a></p> </div> </li> <li> <h2>懒人图库 3</h2> <div class="content"> <p>学会偷懒,并懒出境界是提高工作效率最有效的方法!<br /> <br /> <a href="http://www.lanrentuku.com/" mce_href="http://www.lanrentuku.com/" target="_blank">http://www.lanrentuku.com/</a></p> </div> </li> <li> <h2>懒人图库 4</h2> <div class="content"> <p>学会偷懒,并懒出境界是提高工作效率最有效的方法!<br /> <br /> <a href="http://www.lanrentuku.com/" mce_href="http://www.lanrentuku.com/" target="_blank">http://www.lanrentuku.com/</a></p> </div> </li> <li> <h2>懒人图库 5</h2> <div class="content"> <p>学会偷懒,并懒出境界是提高工作效率最有效的方法!<br /> <br /> <a href="http://www.lanrentuku.com/" mce_href="http://www.lanrentuku.com/" target="_blank">http://www.lanrentuku.com/</a></p> </div> </li> <li> <h2>懒人图库 6</h2> <div class="content"> <p>学会偷懒,并懒出境界是提高工作效率最有效的方法!<br /> <br /> <a href="http://www.lanrentuku.com/" mce_href="http://www.lanrentuku.com/" target="_blank">http://www.lanrentuku.com/</a></p> </div> </li> </ul> </body> </html> 下拉菜单2 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css下拉菜单演示</title> <mce:style type="text/css"><!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 180px; position: absolute; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 180px;w/idth: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } --></mce:style><style type="text/css" mce_bogus="1">*{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 180px; position: absolute; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 180px;w/idth: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; }</style> <mce:script type=text/javascript><!-- //--><![CDATA[//><!-- function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].οnmοuseοver=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].οnmοuseοut=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"), ""); } } } window.οnlοad=menuFix; //--><! // --></mce:script> </head> <body> <ul id="nav"> <li><a href="#" mce_href="#">产品介绍</a> <ul> <li><a href="#" mce_href="#">产品一</a></li> <li><a href="#" mce_href="#">产品一</a></li> <li><a href="#" mce_href="#">产品一</a></li> <li><a href="#" mce_href="#">产品一</a></li> <li><a href="#" mce_href="#">产品一</a></li> <li><a href="#" mce_href="#">产品一</a></li> </ul> </li> <li><a href="#" mce_href="#">服务介绍</a> <ul> <li><a href="#" mce_href="#">服务二</a></li> <li><a href="#" mce_href="#">服务二</a></li> <li><a href="#" mce_href="#">服务二</a></li> <li><a href="#" mce_href="#">服务二服务二</a></li> <li><a href="#" mce_href="#">服务二服务二服务二</a></li> <li><a href="#" mce_href="#">服务二</a></li> </ul> </li> <li><a href="#" mce_href="#">成功案例</a> <ul> <li><a href="#" mce_href="#">案例三</a></li> <li><a href="#" mce_href="#">案例</a></li> <li><a href="#" mce_href="#">案例三案例三</a></li> <li><a href="#" mce_href="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#" mce_href="#">关于我们</a> <ul> <li><a href="#" mce_href="#">我们四</a></li> <li><a href="#" mce_href="#">我们四</a></li> <li><a href="#" mce_href="#">我们四</a></li> <li><a href="#" mce_href="#">我们四111</a></li> </ul> </li> <li><a href="#" mce_href="#">在线演示</a> <ul> <li><a href="#" mce_href="#">演示</a></li> <li><a href="#" mce_href="#">演示</a></li> <li><a href="#" mce_href="#">演示</a></li> <li><a href="#" mce_href="#">演示演示演示</a></li> <li><a href="#" mce_href="#">演示演示演示</a></li> <li><a href="#" mce_href="#">演示演示</a></li> <li><a href="#" mce_href="#">演示演示演示</a></li> <li><a href="#" mce_href="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#" mce_href="#">联系我们</a> <ul> <li><a href="#" mce_href="#">联系联系联系联系联系</a></li> <li><a href="#" mce_href="#">联系联系联系</a></li> <li><a href="#" mce_href="#">联系</a></li> <li><a href="#" mce_href="#">联系联系</a></li> <li><a href="#" mce_href="#">联系联系</a></li> <li><a href="#" mce_href="#">联系联系联系</a></li> <li><a href="#" mce_href="#">联系联系联系</a></li> </ul> </li> </ul> <p>查找更多代码,请访问:<a href="http://www.lanrentuku.com" mce_href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p> </body> </html> 横向菜单1 <!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>Chinaz菜单导航</title> <mce:style type="text/css"><!-- div, ul, p{ margin: 0; padding: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit; } body { color: #333; background: #deebf3; text-align: center; font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif; } a:link, a:visited { color: #333; text-decoration: none; } /* Nav ==========================================================*/ .nav { width:910px; position: relative; margin:0px auto; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 0 -36px; } .navinner { background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 100% -72px; } .navlist { height: 36px; line-height: 36px; overflow: hidden; margin: 0 10px; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) repeat-x 0 0; } .nav li { float: left; display: inline; margin: 0 0 0 -2px; padding: 0 4px 0 6px; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 0 -108px; } .nav a { display: block; width: 102px; text-align: center; font-size: 120%; } .nav a:link, .nav a:visited { color: #fff; } .nav a.current, .nav a:hover, .nav a:active { color: #fff; font-weight: bold; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 50% -144px; } .subnav { position: absolute; top: 41px; left: 0; float: left; height: 27px; line-height: 27px; white-space: nowrap; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 0 -180px; } * html .subnav { margin: 0 10px 0 -10px; /* IE 6 and below */ } .subnav p { padding: 0 10px; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 100% -234px; } .subnav p span { display: block; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) repeat-x 0 -207px; } .subnav p.pointer { position: absolute; top: -4px; left: 0; height: 5px; width: 11px; padding: 0; margin-left: 20px; text-indent: -999em; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) repeat-x 0 -261px; } .subnav a { display: inline; padding: 0; font-size: 100%; } [class~="subnav"] a { padding: 0 3px; } .subnav, .subnav a:link, .subnav a:visited { color: #235e99; } .subnav a:hover, .subnav a:active { color: #235e99; } .subnav a:hover, .subnav a:active { font-weight: normal; background: none; border-bottom: 2px solid; } /* subnav position and pointer position */ #subnav1 { left: 120px; } #subnav2 { left: 230px; } #subnav3 { left: 340px; } #subnav4 { left: 450px; } #subnav5, #subnav6, #subnav7 { left: auto; right: 0px; } #subnav1 .pointer, #subnav2 .pointer, #subnav3 .pointer, #subnav4 .pointer { left: 30px; } #subnav5 .pointer { left: auto; right: 290px; } #subnav6 .pointer { left: auto; right: 180px; } #subnav7 .pointer { left: auto; right: 70px; } #subnav1, #subnav2, #subnav3, #subnav4 { min-width: 110px; } #subnav5 { min-width: 340px; } #subnav6 { min-width: 240px; } #subnav7 { min-width: 130px; } /* Note ==========================================================*/ .note { margin: 0 15px 10px; color:#666666; } .note span{ float:right; } .disable { display: none; } --></mce:style><style type="text/css" mce_bogus="1">div, ul, p{ margin: 0; padding: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit; } body { color: #333; background: #deebf3; text-align: center; font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif; } a:link, a:visited { color: #333; text-decoration: none; } /* Nav ==========================================================*/ .nav { width:910px; position: relative; margin:0px auto; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 0 -36px; } .navinner { background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 100% -72px; } .navlist { height: 36px; line-height: 36px; overflow: hidden; margin: 0 10px; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) repeat-x 0 0; } .nav li { float: left; display: inline; margin: 0 0 0 -2px; padding: 0 4px 0 6px; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 0 -108px; } .nav a { display: block; width: 102px; text-align: center; font-size: 120%; } .nav a:link, .nav a:visited { color: #fff; } .nav a.current, .nav a:hover, .nav a:active { color: #fff; font-weight: bold; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 50% -144px; } .subnav { position: absolute; top: 41px; left: 0; float: left; height: 27px; line-height: 27px; white-space: nowrap; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 0 -180px; } * html .subnav { margin: 0 10px 0 -10px; /* IE 6 and below */ } .subnav p { padding: 0 10px; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 100% -234px; } .subnav p span { display: block; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) repeat-x 0 -207px; } .subnav p.pointer { position: absolute; top: -4px; left: 0; height: 5px; width: 11px; padding: 0; margin-left: 20px; text-indent: -999em; background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) repeat-x 0 -261px; } .subnav a { display: inline; padding: 0; font-size: 100%; } [class~="subnav"] a { padding: 0 3px; } .subnav, .subnav a:link, .subnav a:visited { color: #235e99; } .subnav a:hover, .subnav a:active { color: #235e99; } .subnav a:hover, .subnav a:active { font-weight: normal; background: none; border-bottom: 2px solid; } /* subnav position and pointer position */ #subnav1 { left: 120px; } #subnav2 { left: 230px; } #subnav3 { left: 340px; } #subnav4 { left: 450px; } #subnav5, #subnav6, #subnav7 { left: auto; right: 0px; } #subnav1 .pointer, #subnav2 .pointer, #subnav3 .pointer, #subnav4 .pointer { left: 30px; } #subnav5 .pointer { left: auto; right: 290px; } #subnav6 .pointer { left: auto; right: 180px; } #subnav7 .pointer { left: auto; right: 70px; } #subnav1, #subnav2, #subnav3, #subnav4 { min-width: 110px; } #subnav5 { min-width: 340px; } #subnav6 { min-width: 240px; } #subnav7 { min-width: 130px; } /* Note ==========================================================*/ .note { margin: 0 15px 10px; color:#666666; } .note span{ float:right; } .disable { display: none; }</style> <mce:script type="text/javascript"><!-- function $(id) { return document.getElementById(id); } function showMenu (baseID, divID) { baseID = $(baseID); divID = $(divID); if (showMenu.timer) clearTimeout(showMenu.timer); hideCur(); divID.style.display = 'block'; showMenu.cur = divID; if (! divID.isCreate) { divID.isCreate = true; //divID.timer = 0; divID.onmouseover = function () { if (showMenu.timer) clearTimeout(showMenu.timer); hideCur(); divID.style.display = 'block'; }; function hide () { showMenu.timer = setTimeout(function () {divID.style.display = 'none';}, 1000); } divID.onmouseout = hide; baseID.onmouseout = hide; } function hideCur () { showMenu.cur && (showMenu.cur.style.display = 'none'); } } // --></mce:script> </head> <body> <div class="nav"> <div class="navinner"> <ul class="navlist"> <li><a href="#" mce_href="#">首页</a></li> <li><a href="/News/Index.html" mce_href="News/Index.html" id="nav_1" οnmοuseοver="showMenu('nav_1','subnav1')">asp教程</a> <div class="subnav disable" id="subnav1"> <p class="pointer">.</p> <p><span> <a href="#" mce_href="#">基础教程</a> | <a href="#" mce_href="#">实例教程</a> | <a href="#" mce_href="#">高级教程</a> | <a href="#" mce_href="#">组件教程</a> </span></p> </div> </li> <li><a href="#" mce_href="#" id="nav_2" οnmοuseοver="showMenu('nav_2','subnav2')">javascript教程</a> <div class="subnav disable" id="subnav2"> <p class="pointer">.</p> <p><span> <a href="#" mce_href="#">基础教程</a> | <a href="#" mce_href="#">实例教程</a> | <a href="#" mce_href="#">高级教程</a> </span></p> </div> </li> <li><a href="#" mce_href="#" id="nav_3" οnmοuseοver="showMenu('nav_3','subnav3')">网站运营</a> <div class="subnav disable" id="subnav3"> <p class="pointer">.</p> <p><span> <a href="#" mce_href="#">建站经验</a> | <a href="#" mce_href="#">策划盈利</a> | <a href="#" mce_href="#">搜索优化</a> | <a href="#" mce_href="#">网站推广</a> | <a href="#" mce_href="#">免费资源</a> </span></p> </div> </li> <li><a href="#" mce_href="#" id="nav_4" οnmοuseοver="showMenu('nav_4','subnav4')">css方面</a> <div class="subnav disable" id="subnav4"> <p class="pointer">.</p> <p><span> <a href="#" mce_href="#">酷站推荐</a> | <a href="#" mce_href="#">网页设计</a> | <a href="#" mce_href="#">WEB标准</a> | <a href="#" mce_href="#">设计活动</a> </span></p> </div> </li> <li><a href="#" mce_href="#" id="nav_5" οnmοuseοver="showMenu('nav_5','subnav5')">网络编程</a> <div class="subnav disable" id="subnav5"> <p class="pointer">.</p> <p><span> <a href="#" mce_href="#">Asp编程</a> | <a href="#" mce_href="#">Php编程</a> | <a href="#" mce_href="#">.Net编程</a> | <a href="#" mce_href="#">Xml编程</a> | <a href="#" mce_href="#">Access</a> | <a href="#" mce_href="#">Mssql</a> | <a href="#" mce_href="#">Mysql</a> </span></p> </div> </li> <li><a href="#" mce_href="#" id="nav_6" οnmοuseοver="showMenu('nav_6','subnav6')">联盟资讯</a> <div class="subnav disable" id="subnav6"> <p class="pointer">.</p> <p><span> <a href="#" mce_href="#">联盟新闻</a> | <a href="#" mce_href="#">联盟介绍</a> </span></p> </div> </li> <li><a href="#" mce_href="#" id="nav_7" οnmοuseοver="showMenu('nav_7','subnav7')">服务器</a> <div class="subnav disable" id="subnav7"> <p class="pointer">.</p> <p><span> <a href="#" mce_href="#">Web服务器</a> | <a href="#" mce_href="#">Ftp服务器</a> </span></p> </div> </li> </ul> </div> </div> </div><p>查找更多代码,请访问:<a href="http://www.lanrentuku.com" mce_href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p> </body> </html>